reactJS 组件交互 如何动态加载出li

Question

var CommentInput = React.createClass({

getInitialState: function () {
    return ({UserName: ''})
},
render: function () {
    return (
        <section style={DemoListHeader}>
            <div>
                <p style={DemoListLabelText}>请输入:</p>
                <input style={DemoListInputText} type="text" name="addList" value={this.state.UserName}
                       onChange={this.handleChange} onKeyPress={this.setInputValue}/>
            </div>
        </section>
    )
},
handleChange: function (ev) {
    this.setState({UserName: '' + ev.target.value + ''});
},
setInputValue: function (ev){
    if (ev.which == 13) {
        this.props.onInput(this.state.UserName);
    }
}

})

var CommentListDoingChildren = React.createClass({

render: function () {
    return (
        <li>
            <input type="radio" style={{float:"left"}}/>
            {this.props.name}
            <p style={{float:"right"}}>删除</p>
        </li>
    )
}

});

var App = React.createClass({

getInitialState: function () {
    return ({AppValue: []})
},
render: function () {
    return (
        <div>
            <CommentInput onInput={this.handleOnInput}/>
            <ol>
                <CommentListDoingChildren name={this.state.AppValue} />
            </ol>
        </div>
    );
},
handleOnInput: function (ev) {
    var data =this.state.AppValue;
    data.push(ev);
    this.setState({AppValue:data})
    console.log(data)
},

});
ReactDOM.render(

<App />,
document.getElementById('content')

);

／／如何动态加载出li 现在只能加载出数据

Answer 1

经过中午的仔细推敲问题已经解决 再次感谢两位朋友的帮助

以下是代码

var CommentInput = React.createClass({

getInitialState: function () {
    return ({UserName: ''})
},
render: function () {
    return (
        <section style={DemoListHeader}>
            <div>
                <p style={DemoListLabelText}>请输入:</p>
                <input  style={DemoListInputText} type="text" name="addList" value={this.state.UserName}
                       onChange={this.handleChange} onKeyPress={this.setInputValue}/>
            </div>
        </section>
    )
},
handleChange: function (ev) {
    this.setState({UserName: '' + ev.target.value + ''});
},
setInputValue: function (ev) {
    if (ev.which == 13) {
        this.props.onInput(this.state.UserName);
        this.setState({UserName: ''});
    }
}

})

var CommentListDoingChildren = React.createClass({

render: function () {
    return (
        <li>
            <input type="checkbox" />
            {this.props.data}
            <p style={{float:"right",margin:"0px"}}>删除</p>
        </li>
    )
}

});
var App = React.createClass({

getInitialState: function () {
    return ({AppValue: []})
},
render: function () {
    var elements=this.state.AppValue.map(function(e){
        return(
            <CommentListDoingChildren data={e} />
        )
    })
    return (
        <div>
            <CommentInput onInput={this.handleOnInput}/>
            <section>
                <ol style={DemoListOl}>
                    {elements}
                </ol>
            </section>

        </div>
    );
},
handleOnInput: function (ev) {
    var data = this.state.AppValue;
    data.push(ev);
    this.setState({AppValue: data})
    console.log(data)
},

});

ReactDOM.render(

<App />,
document.getElementById('content')

);

Answer 2

我看出了两个问题：

1. setState是异步的，你keyboard事件触发的时候，setState事件还没有完成。所以在 CommentInput 组件里面的setInputValue 方法中传入的参数不应该是state.Username，应该加上ref属性获取值。

2. CommentListDoingChildren组件的name是数组，所以应该：

this.props.name.map((name,i) => {
   <li>
      <input type="radio" style={{float:"left"}}/>
        {name}
      <p style={{float:"right"}}>删除</p>
  </li>
});

Answer 3

react mvvm，数据驱动
一开始组件的数据 设置 state，
动态的话，给一个事件，如 click，
然后改变state的值，如：state.push(arr)， 再setSate({})