我正在尝试通过另一个组件呈现一个按钮来引用和/或影响另一个组件的状态.
var Inputs = React.createClass({ getInitialState: function(){ return {count: 1}; }, add: function(){ this.setState({ count: this.state.count + 1 }); }, render: function(){ var items = []; var inputs; for (var i = 0; i < this.state.count; i++){ items.push(); items.push(
); } return (); } });
我想编写一个能够访问Inputs中的add函数的新组件.我试着Inputs.add
像这样直接引用它:
var Add = React.createClass({ render: function(){ return ( ); } });
但那没用.我如何通过另一个组件访问组件的功能,或通过另一个组件影响组件的状态?谢谢.
您可以通过创建负责管理状态的父组件来完成此操作,然后将状态向下推送到子组件作为props.
/** @jsx React.DOM */ var Inputs = React.createClass({ render: function () { var items = []; var inputs; for (var i = 0; i < this.props.count; i++) { items.push( <input type="text" name={[i]} />); items.push(<br />); } return ( <div className = "col-md-9"> <form action = "/" method = "post" name = "form1"> {items} <input type="submit" className="btn btn-success" value = "Submit Form" /> </form> </div> ); } }); var Add = React.createClass({ render: function () { return (<input type = "button" className="btn" value="Add an Input" onClick={this.props.fnClick}/> ); } }); var Parent = React.createClass({ getInitialState: function(){ return {count:1} }, addInput: function(){ var newCount = this.state.count + 1; this.setState({count: newCount}); }, render: function(){ return ( <div> <Inputs count={this.state.count}></Inputs> <Add fnClick={this.addInput}/> </div> ); } }); React.renderComponent(<Parent></Parent> , document.body);
的jsfiddle