react 实现input提交后 list显示功能

最新推荐文章于 2021-12-18 08:55:19 发布

原创最新推荐文章于 2021-12-18 08:55:19 发布 · 487 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用React构建的简单应用实例，该应用包含一个输入框和按钮，用于收集用户输入并将其添加到动态显示的列表中。通过这个示例，读者可以学习如何在React中处理用户输入、状态管理和列表渲染。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="./react.developemt.js"></script>
    <script src="./react-dom.development.js"></script>
    <script src="./babel.min.js"></script>
</head>

<body>
    <div id='container'>
    </div>
    <script>

    </script>
    <script type="text/babel">
    class App extends React.Component{
        constructor(props) {
          super(props)
          this.state = {
             inputvalue:'',
             list:['play','eat']
          }
          this.submitfunc=this.submitfunc.bind(this)
          this.changefunc=this.changefunc.bind(this)
        }
        submitfunc=function(){
            this.setState({
                list:[...this.state.list,this.state.inputvalue],
                inputvalue:''
            })

        }
       changefunc=function(event){
           this.setState({inputvalue:event.target.value})
       }
        render(){
          return (
            <div>
              <input value={this.state.inputvalue}
                     onChange={this.changefunc}/>
              <button onClick={this.submitfunc}>submit</button>
              <ul>
              {
                  this.state.list.map((content)=>{
                      return <li>{content}</li>
                  })
                }
                </ul>
            </div>
          )
        }
        
    }
    ReactDOM.render(
        <div>
            <App/>
        </div>,
        document.querySelector("#container")

    )
    </script>
</body>

</html>