Reactjs组件结构并为子组件创建新条目

Question

我有一个Categories组件可以获取它的数据（一个平面对象文字数组），然后列出子类别组件中的数据：

Categories.jsx

var Categories = React.createClass({
    render: function () {

        // this.state.categories is already defined as is array of objects
        // example: [{categoryID: 1, categoryName: 'Test', ...},]
        this.state.categories.map(function (category) {
            categories.push(<Category category={category} key={category.categoryID} />);
        });

        return (
            <div className="categories">
                {categories}
            </div>
        );
    }
});

Category.jsx

var Category = React.createClass({
    render: function () {
        return (
            <div className="category" id={this.props.category.categoryID}>
                <div className="toggle">
                    <input type="checkbox" className="toggle-category" checked={this.props.category.isActive} />
                </div>
                <div className="name">
                    {this.props.category.categoryName}
                </div>
            </div>
        );
    }
});

我需要这样做，以便当用户点击类别（或尚未放入的类别中的edit按钮）时，我需要将该数据加载到form填充了Category道具（由Categories州指示）;

然而，每次我尝试（通过状态，道具等）时，defaultValue永远不会使用正确的数据进行初始化，因为defaultValue通常是空的，因为我正在获取类别数据通过Ajax。

EditCategories.jsx

var EditCategory = React.createClass({
    render: function () {

        return (
            <div>
                <input type="text" defaultValue={this.props.category.categoryID} />
            </div>
        );
    }

});

在Categories.jsx：

中依次安装

<EditCategory category={this.state.categoryBeingEdited} />;

我可以通过categoryBeingEdited中的点击事件成功获取Categories.jsx进行更新并发送CATEGORY_SELECTED操作，但我不确定如何允许编辑{{ 1}}因为categoryBeingEdited的挂载只发生过一次，所以加载到带有先前设置的EditCategory的文本字段中也是不可能的。

Answer 1

这是关于React最不喜欢的事情之一。我们使用的解决方案是在输入更改时不使用defaultValue并将value设置为状态变量。例如（请注意，这是未经测试的）：

var EditCategory = React.createClass({

  getInitialState: function() {
    return {categoryID: this.props.category.categoryID};
  },

  componentWillReceiveProps: function(nextProps) {
    this.setState({categoryID: nextProps.category.categoryID});
  },

  handleChange: function(event) {
    this.setState({categoryID: event.target.value});
  },

  render: function () {

    return (
        <div>
            <input type="text" onChange={this.handleChange} value={this.state.categoryID} />
        </div>
    );
  }

});