react.js - reactJS 组件交互 如何动态加载出li

问题描述

问 题

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 现在只能加载出数据

解决方案

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

以下是代码

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')

);

这篇关于react.js - reactJS 组件交互 如何动态加载出li的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！