如何將輸入數據添加到react js中的列表？

Question

我正在嘗試制作 Todo 應用程序，但被卡住了，無法繼續進行。 請幫忙

var Todo= React.createClass({
    save() {
      this.refs.newText.value
    },

    render(){
        return(
            <div className="list">
              <h1> TO-DO List</h1>
              <input type="text" ref="newtext" defaultValue={this.props.children} />
              <button onclick={this.save} className="btn btn-primary glyphicon glyphicon-floppy-saved">
              </button>
              <ul>
                <li>{this.target.value}</li>
              </ul>
            </div>
        )
    },


});

Answer 1

保持一個狀態，您將在其中添加新添加的項目，然后迭代它以在視圖中顯示。 此外，您不應該使用字符串引用，而應該按照react-docs的建議進行ref callbacks 。 另外， onclick按鈕應該camelcase狀onClick

 var Todo= React.createClass({ getInitialState() { return { todos: [] } }, save() { var todos = [...this.state.todos]; todos.push(this.newText.value); console.log(todos) this.setState({todos}); }, render(){ return( <div className="list"> <h1> TO-DO List</h1> <input type="text" ref={(ip) => {this.newText = ip}}/> <button onClick={this.save} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save </button> <ul> {this.state.todos.map(function(todo) { return <li>{todo}</li> })} </ul> </div> ) }, }); ReactDOM.render(<Todo/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.2/react-dom.min.js"></script> <div id="app"></div> 

Answer 2

要添加Shubnam的答案，請考慮使用ES6類並在構造函數中初始化狀態，因為現在推薦使用ES6類。 現在不推薦使用React.createClass，並在控制台上顯示警告。 檢查此代碼，注意您需要綁定save方法。

查看這些鏈接以獲取更多信息：

https://facebook.github.io/react/blog/#migrating-from-react.createclass

https://toddmotto.com/react-create-class-versus-component/

 class Todo extends React.Component { constructor(props) { super(props); this.state={todos:[]}; } save() { var todos = [...this.state.todos]; todos.push(this.newText.value); this.setState({todos}); } render(){ return( <div className="list"> <h1> TO-DO List</h1> <input type="text" ref={(ip) => {this.newText = ip}}/> <button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save </button> <ul> {this.state.todos.map(function(todo) { return <li>{todo}</li> })} </ul> </div> ) } }; ReactDOM.render(<Todo/>, document.getElementById('app')); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="app"></div> 

Answer 3

`` import React, { Component } from 'react'; 從'./nav'導入導航；

類 Delete_Contect 擴展組件 {

constructor(props)
{
    super(props);

    this.state={
        name:'vishal',

        name_add:[1,2,4]
     };
    
    this.Change = this.Change.bind(this);
    this.Add_data = this.Add_data.bind(this);
}

Change()
{
    this.setState(
    {
         name:'boss'
    }
  )
}
Add_data(e)
{   
    const newContect = this.newText.value

    this.setState({

       name_add: [...this.state.name_add, newContect]
  
    })
}

render() {
   return (

      <div>

            {this.state.name_add.map((number) => {

                return(

                   <li>{number}</li>

               )

           })}

           <input type="text" ref={(ip) => {this.newText = ip}} />

           <button onClick={this.Add_data}>submit</button>        

         </div>

    );
}

}

export default Delete_Contect;