将道具传递给React JS中的父项

这里我有一个默认数字为“3”的文本字段，我希望在输入数值并单击按钮时更新它。因为，我正在更新Child中的值，我不知道如何将道具传递给Parent。将道具传递给React JS中的父项

var Game = React.createClass({ 
    getInitialState: function() { 
     return { 
      input: 3 
     }; 
    }, 

    setSize: function() { 
     //here it should update "input" 
     this.setState({input: /* value from Child */ }) 
    }, 

    render: function() { 
     return( 
      <div> 
       <div id='game'> 
        <Menu input={this.state.input}/> 
       </div> 
      </div> 
     ) 
    } 
}); 


var Menu = React.createClass({ 
    render: function() { 
     return (
      <div id='menu'> 
       <input type="number" id="myNumber" value={this.props.input}> </input> 
       <button id="mySetNumber" onclick={this.props.setSize}>Try it</button> 
      </div> 
     ) 
    } 
})

来源

2015-04-01 user3053089

我想你可以传递一个函数在父对象中的引用，作为一个属性。然后点击打电话。 – Eric 2015-04-01 08:40:37

请问你能举一个例子，因为我是React JS的新手？ @Eric – user3053089 2015-04-01 08:44:23

它可以是这样的：

var Game = React.createClass({ 
    changeInput: function(e) { 
    this.setState({/* do something */}) 
}, 

render: function() { 
    return (
    <div id="game"> 
     <Menu onValueChange={this.changeInput} /> 
    </div> 
    ) 
    } 
}); 

var Menu = React.createClass({ 
    handleChange: function(e) { 
    this.props.onValueChange(/* pass the element or the value */) 
    } 

render: function() { 
    return (
    <div id="menu"> 
     <input onChange={this.handleChange}/> 
    </div> 
    ) 
    } 
})

更多或更少的这样的事情应该工作。更多信息请参见this。这个想法是将回调函数从父项传递给子项。

来源

2015-04-01 08:54:38 argentum47

Thnx @ arargentum47。如果有人需要更具体的例子，在这里我找到了一个视频的[链接]（https://egghead.io/lessons/react-owner-ownee-relationship）。 – user3053089 2015-04-01 09:16:59

老兄！非常感谢你！ – 0bserver07 2015-10-20 03:53:35

var App = React.createClass({ 
    handleDayGreeting:function(greeting){ 
     this.setState({dayGreeting:greeting}); 
    }, 
    render:function({onClick,message}){  
     return (
      <div> 
       <span> Hello ! {message} </span> 
       <Greeting handleDayGreeting={this.handleDayGreeting.bind(this)} />    
      </div>   
     ); 
    } 
}); 

var Greeting = React.createClass({ 
    sayMorining:function(){ 
     this.props.handleDayGreeting('Good Morining'); 
    }, 
    sayEvening:function(){ 
     this.props.handleDayGreeting('Hey...! Good Evening'); 
    }, 
    render:function(){ 
     return (
      <div> 
       <button onClick={onClick}>Say Morning</button> 
       <button onClick={onClick}>Say Evening</button> 
      </div> 
     ); 
    } 
});

来源

2016-12-29 20:26:09

将道具传递给React JS中的父项

回答

相关问题