在复选框上显示组件单击反应答案

【问题标题】：Showing components on checkbox click in react在复选框上显示组件单击反应
【发布时间】：2017-07-05 04:10:52
【问题描述】：

您好，我是 react 新手，我对 react 中的复选框单击处理有疑问。我想在选中复选框时显示 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}

        )
    }
}

【问题讨论】：

标签： html css reactjs checkbox

【解决方案1】：

您的代码中有几个语法错误：

以class 定义的函数不能使用= 方式。
React 渲染函数需要一个根容器，例如 div 标签。

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')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

【讨论】：

它有一个根容器。我只是没有在此处包含它，因为我的问题不需要它

【解决方案2】：

原因是你总是设置showComponent=true的值，当复选框未选中时，你需要重置状态变量，使用这个：

showComments(e){

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

}

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

您需要更改的几件事：

*您是returning 2 个来自render 的元素，一个div 和一个来自条件rendering 的div。我们不能从render 返回多个html 元素，所以将条件渲染放在主div 中。

*你是bindingshowComments方法两次，一次在constructor中，另一次使用arrow，去掉arrow，这不是必需的。

*你是rendering的div条件为空，放一些内容。

【讨论】：

很高兴为您提供帮助:)

【解决方案3】：

您需要将您的onClick 侦听器更改为onChange。然后，将showComments 重命名为toggleComments 并像这样实现它：

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

【讨论】：