javascript - 在react中设置另一个组件的状态

Question

我浏览了与我的问题略有相关的活跃问题，但没有找到成功的解决方案。我希望有人能帮助我。

我在 js fiddle 上有一个简单的 React Baby 代码:http://jsfiddle.net/kb3gN/10313/

我的代码的说明可以在代码下方找到:

var Test = React.createClass({
    getInitialState: function(){
        return{
            data: [
                ['Charlie', 10],
                ['Bello', 20],
                ['Wuffi', 15]
            ]
        }
    },
   render: function(){
        return(
            <div>
                <MakePOS data={this.state.data} />
                <MakeTable />
            </div>
        );
    }
});

var MakeTable = React.createClass({
    getInitialState: function(){
        return{
            active: 0,
            weight: 0
        }
    },
    render: function(){
            return(
                <table>
                    <thead>
                        <tr>
                            <td>Type</td>
                            <td>Amount</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Chicken</td>
                            <td>some</td>
                        </tr>
                        <tr>
                            <td>Carotts</td>
                            <td>some</td>
                        </tr>
                        <tr>
                            <td>Apple</td>
                            <td>some</td>
                        </tr>
                    </tbody>
                </table>
            );
    }
});

var MakePOS = React.createClass({
    handleClick: function(){
        // update state of MakeTable Component to active = id of the clicked element
        // also update state of MakeTable Component to weight = data-weight value
    },
    render: function(){
        var POS = this.props.data.map(function(i){
        console.log(i[0]+' '+i[1]+' kg');
            return <button onClick={this.handleClick} data-weight={i[1]} id={i[0]}>{i[0]}</button>;
        });
        return(<div className="testDiv">{POS}</div>);
    }
});
React.render(<Test />, document.getElementById('foodApp')); 

解释我的代码:

测试组件中的状态数组代表用户的输入，在本例中他选择填写 3 只宠物及其体重。

根据他的输入动态地在 MakePOS 组件中创建按钮。

现在我想做的是，处理这些按钮上的 Click 事件并影响 MakeTable 组件的状态，以便处理隐藏在该按钮后面的值。

我想根据宠物的体重动态更改表格行数。

我希望它可以理解。

感谢您的帮助

编辑 Facebook 文档提到了类似的内容，但我并没有真正得到暗示。 在他们的示例中，他们只是在同一组件中调用 onClick 函数。我找不到任何更改父组件的子组件状态的解决方案:( http://facebook.github.io/react/tips/communicate-between-components.html

Answer 1

您应该将 handleClick 函数移至管理您想要影响的状态的组件(在本例中为 Test)，然后通过以下方式将其作为回调传递下来 Prop 。由于点击也会影响 active 和 weight，因此它们也应该保持在 Test 状态，因此 handleClick 可以轻松更改其状态。

var Test = React.createClass({
   getInitialState: function(){
        return{
            data: [
                ['Charlie', 10],
                ['Bello', 20],
                ['Wuffi', 15]
            ],
            active: 0,
            weight: 0
        }
   },
   changeWeight: function(weight){
   // do whatever actions you want on click here
   console.log('I am in the main Component ');
   console.log(weight);
   },
   render: function(){
        return(
            <div>
                <MakePOS data={this.state.data} changeWeight={this.changeWeight} />
                <MakeTable active={this.state.active} weight={this.state.weight}/>
            </div>
        );
    }
});

var MakeTable = React.createClass({
    getInitialState: function(){
        return{
            active: 0,
            weight: 0
        }
    },
    render: function(){
            return(
                <table>
                    <thead>
                        <tr>
                            <td>Type</td>
                            <td>Amount</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Chicken</td>
                            <td>some</td>
                        </tr>
                        <tr>
                            <td>Carotts</td>
                            <td>some</td>
                        </tr>
                        <tr>
                            <td>Apple</td>
                            <td>some</td>
                        </tr>
                    </tbody>
                </table>
            );
    }
});

var MakePOS = React.createClass({
  handleClick: function(weight){
      this.props.changeWeight(weight);
  },
  render: function(){
    var POS = this.props.data.map(function(i){
    console.log(i[0]+' '+i[1]+' kg');
        return <button onClick={this.handleClick.bind(this,i[1])} key={i[0]}  id={i[0]}>{i[0]}</button>;
    }.bind(this));
    return(<div className="testDiv">{POS}</div>);
  }
});

React.render(<Test />, document.getElementById('foodApp'));