Question

我最近在组件中添加了一些复选框。在下面的地图功能中，将渲染其中的5个。

在附加一个复选框onchange处理程序后，不仅无法执行check / uncheck操作，而且现在在此组件中编辑textarea的文本也破坏了编辑功能，并在MobX中（在控制台中）导致了无限循环。

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

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

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

您直接在渲染上调用 my_file = open("first_file.txt", "r") for line in my_file.readlines(): if line[-1:] == "\n": print(line[:-1]) else: print(line) my_file.close()。您想给reverse_checkbox_state提供一个在发生更改事件时将要调用的函数，而不是自己调用该函数。

onChange

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

1 个答案: