您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

在另一个组件中反应JS参考函数

在另一个组件中反应JS参考函数

您可以通过创建一个负责管理状态的父组件来完成此任务,然后将状态作为道具向下推到子组件。

/** @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

其他 2022/1/1 18:14:53 有462人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶