将组件添加到另一个组件React

Hello I am trying to add a new component called ListItem whenewher I enter the text to the input and press "Add" button.

您好我正在尝试添加一个名为ListItem的新组件whenewher我输入文本到输入并按“添加”按钮。

    var Input = React.createClass({

    addListItem: function(){
    console.log(this.refs.input.value);
    <ListItem>{this.refs.input.value}</ListItem>

    },
        render: function(){
            return (
                <div>
                  <input ref="input" type="text"/>
                  <button onClick={this.addListItem}>Add</button>
                </div>
            );
        }
    });

    var ListItem = React.createClass({

        render: function(){
            return (
                <li class="listItem">
                  {this.props.value}
                </li>
            );          
        }
    });

ReactDOM.render(<Input/>, container);

The problem is that the component does are not being created, I have also tried just to add some text in the li element, when i thought that the props are not getting passed, but that was not the issue.

问题是组件没有被创建,我也尝试过在li元素中添加一些文本,当我认为道具没有通过时,但这不是问题。

What am I not understanding here ?

我在这里不理解什么?

2 个解决方案

#1

Maintain items state and use it to render the ListItem's:

维护项状态并使用它来呈现ListItem:

var Input = React.createClass({
getInitialState: function(){
    return {
        items: []
    };
},
addListItem: function(){
    var items = this.state.items;
    items.push(this.refs.input.value);
    this.setState({
      items: items
    });
},
render: function(){
    return (
        <div>
            <input ref="input" type="text"/>
            <button onClick={this.addListItem}>Add</button>
            {this.getItems()}
        </div>
    );
},
getItems: function(){
    return this.state.items.map(function (i) {
        return <ListItem>{i}</ListItem>

    });
 }
});

#2

 var Input = React.createClass({
getInitialState(){
    return {
        list :[]
    }
},
addListItem: function(){
    let array = this.state.list;
     array.push({value:this.refs.input.value});
    this.setState({list: array});

},
render: function(){
    let list = this.state.list;
    console.log(list)
    let item = list&&list.map((d,i)=>{
            return (
                <ListItem key={i}>{d.value}</ListItem>
            );
        });
    return (
        <div>
            <input ref="input" type="text"/>
            <button onClick={this.addListItem}>Add</button>
            <ul>
                {item}
            </ul>
        </div>
    );
}
});

var ListItem = React.createClass({

render: function(){
    return (
        <li>
            {this.props.children}
        </li>
    );
}
});