Question

你好，我是新手做出反应，我有一个关于反应中的复选框点击处理的问题。我想在选中复选框时显示div，如果取消选中该复选框，则删除div。

我执行此操作的方式仅在单击复选框时显示div，但在取消选中时不会删除div。我该怎么做才能做出反应？

class QuestionOverlay extends Component {

    constructor() {

        super();

        this.showComments = this.showComments.bind(this);

        this.state = {

            showComponent: false,
        };

    }


    showComments = (e) => {

        this.setState({

            showComponent: true,

        });

    }

    render() {

           return (

                <div className="add_checkbox">

                   <span>Enable Comments</span>
                   <input className="checkbox" type="checkbox" name="enable_comment" onClick={this.showComments} value="enable_comment"/>

                </div>



                {this.state.showComponent ? <div  className="comments_preview_sample"></div> : null}

        )
    }
}

Answer 1

原因是您始终设置showComponent=true的值，如果取消选中该复选框，则需要重置状态变量，使用此项：

showComments(e){

    this.setState({
        showComponent: e.target.checked,
    });

}

检查工作小提琴：https://jsfiddle.net/mrqutgbz/

您需要改变的事情很少：

*来自returning的{{1}} 2个元素，一个render以及来自条件div的另一个div。我们无法从rendering返回多个html元素，因此请将条件渲染放在主render中。

*您div方法binding两次，一个在showComments，另一个使用constructor，删除arrow，这不是必需的。

*条件为arrow的条件为空，请填写一些内容。

Answer 2

您需要将onClick听众更改为onChange。然后，将showComments重命名为toggleComments并按如下方式实施：

toggleComments(e) {
  this.setState({ showComponent: e.target.checked });
}

Answer 3

以下是代码中的几个语法错误：

class中定义的功能无法使用=方式。
React渲染函数需要一个像<{1}} tag这样的根容器。

＆＃13;

div

＆＃13;

const { Component } = React;
const { render } = ReactDOM;

class QuestionOverlay extends Component {
	constructor(props) {
		super(props);
		this.state = {
			showComponent: false
		}
		this.showComments = this.showComments.bind(this);
	}

	showComments() {
		this.setState({
			showComponent: !this.state.showComponent
		});
	}

	render() {
		return (
			<div>
				<div className="add_checkbox">
					Enable Comments <br/>
					<input type="checkbox" onClick={this.showComments} />
				</div>
				{this.state.showComponent ? <div className="comments_preview_sample">comments</div> : null}
			</div>
		);
	}
}

render(
	<QuestionOverlay />,
	document.getElementById('root')
);

＆＃13;

显示复选框上的组件单击反应

3 个答案: