React/Mobx：添加复选框处理程序会破坏 textarea 字段

Question

我最近在一个组件中添加了一些复选框。在下面的 map 函数中，渲染了其中的 5 个。

在附加一个复选框 onchange 处理程序后，不仅检查/取消检查操作无法实现，而且在此组件中编辑文本区域的文本现在会破坏编辑功能并导致 MobX 中的无限循环（在控制台中）。

但是，从复选框中删除 onChange 处理程序会立即解决 textarea 的问题。

我看不出这两个是什么关系，有人知道发生了什么吗？这是组件：

const FinalEditsAndCopy = (props) => {

    const update_final_textarea = (text_input) => {
    ui_store.set_final_text_message(text_input.target.value);
        console.log(text_input.target.value);
    };

    const render_social_media_checkboxes = () => {    
        return static_local_data.social_media_sites.map((social_media_site, i) => (
            <List.Item key={i}>
                <List.Content>
                    <input
                        type="checkbox"
                        checked={ui_store.final_social_media_site_selections[social_media_site]}
                        name={social_media_site}
                        className={ checkbox_style }
                        onChange={ ui_store.reverse_checkbox_state(social_media_site) } // This is the line that breaks the textarea and also does not fill its intended purpose
                    />
                    {Lodash.capitalize(social_media_site)}
                </List.Content>
            </List.Item>
        ))
    };

    const render_social_media_checkboxes_test = () => {    
        return static_local_data.social_media_sites.map((social_media_site, i) => (
            <List.Item key={ i }>
                <List.Content>
                    <p>Test</p>
                </List.Content>
            </List.Item>
        ));
    };


    return (    
        <div className={ outer_container_style }>    
            <Container>
                <Form>
                    <TextArea autoHeight
                              value={ ui_store.final_text_message }
                              className={ textarea_style }
                              onChange={ update_final_textarea }
                    />
                    <Message attached='bottom' positive className={ alert_style }>
                        <Icon
                            name='clipboard list'
                            color='green'
                            size='big'
                        />
                        Copied to clipboard
                    </Message>
                </Form>

                <Header size='small'>Select Social Media Sites</Header>

                <div>
                    <List horizontal>
                        {render_social_media_checkboxes()}
                    </List>
                </div>

                <Button size='huge' color='orange'>Copy Text and Open Social Media Sites in New Tabs</Button>
            </Container>

        </div>
    );
};

export default observer(FinalEditsAndCopy);

ui_store 中的 MobX 可观察对象：

final_text_message = '';
final_social_media_site_selections = {
    "facebook" : true,
    "twitter" : true,
    "linkedin" : true,
    "instagram" : true,
    "pinterest" : true
};

以及相关操作：

set_final_text_message(input_message) {
    this.final_text_message = input_message
}

reverse_checkbox_state(social_media_site) {
    this.final_social_media_site_selections[social_media_site] = !this.final_social_media_site_selections[social_media_site]
}

Answer 1

您正在调用 reverse_checkbox_state 直接在渲染上。您想给onChange 一个函数，当更改事件发生时将调用该函数，而不是自己调用该函数。

<input
  type="checkbox"
  checked={ui_store.final_social_media_site_selections[social_media_site]}
  name={social_media_site}
  className={ checkbox_style }
  onChange={() => ui_store.reverse_checkbox_state(social_media_site)}
/>