复选框保持React JS中各组件的状态

Checkbox keeps state across components in React JS

本文关键字：组件 状态 JS React 复选框      更新时间：2023-09-26

我是React JS的新手，但我读过关于<input>的文章，你必须将实际状态保存在onChange中，如下所述：React DOC-Forms

我有一个带有复选框的列表，我在CampaignsRow 中应用了相同的行为

var campaignsData = [{Name: "First"}, {Name: "Second"}, {Name: "Third"}];
var CampaignsRow = React.createClass({
    getInitialState: function() {
        return {checked: false};
    },
    checkedChange: function (e) {
        this.setState({checked: e.target.checked});
    },
    render: function() {
        console.log(this.props.data.Name, this.state.checked);
        return (
            <div className="row">
                <div className="cell checkbox">
                    <input type="checkbox" checked={this.state.checked} onChange={this.checkedChange}/>
                </div>
                <div className="cell campaignName">{this.props.data.Name}</div>
            </div>
        );
    }
});
var CampaignsTable = React.createClass({
    render: function() {
        var rows = this.props.campaigns.map(function(campaign) {
        return (
            <CampaignsRow data={campaign}/>
        );
    });
    return <div className="table">
        <div className="row header">
            <div className="cell checkbox"><input type="checkbox"/></div>
            <div className="cell campaignName">Name</div>
        </div>
        {rows}
    </div>
  }
});
ReactDOM.render(<CampaignsTable campaigns={campaignsData} /> ,document.getElementById('reactContainer'));

我的问题是，如果我选中名为First的活动的复选框，然后通过campaignsData.shift()删除第一个项目（模拟从服务器下载新数据），然后再次渲染，则会选中Second活动的复选复选框。

this.state未附加到实例时的用途是什么。渲染工作正常，因为控制台中打印的是Second true，所以this.state.checked已从第一次移动到第二次

您应该为多个组件添加唯一的key属性，这样React就可以跟踪身份：

var rows = this.props.campaigns.map(function(campaign) {
    return (
        <CampaignsRow key={campaign.name} data={campaign}/>
    );
});
相关文章：