Question

我查看了与我的问题略有关系的活跃问题，但我没有找到成功的解决方案。我希望有人可以帮助我。

我在js小提琴上有一个简单的反应宝贝代码：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'));

解释我的代码：

Test Component中的状态数组代表用户输入，在这种情况下，他选择填写3只宠物及其体重。

动态地输入，按钮在MakePOS组件中创建。

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

我希望根据宠物的重量来改变表行的数量。

我希望它是可以理解的。

感谢您的帮助

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

Answer 1

您应该将handleClick函数移动到管理您想要影响的状态的组件，在本例中为Test，然后通过props将其作为回调传递给它。由于点击也会影响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'));

反应中另一个组件的setStatus

1 个答案: