react组件调用_react做一个实验，学习组件怎么写，组件怎么调用组件，怎么给组件传参数，怎么用组件的state...

react做一个实验，学习组件怎么写，组件怎么调用组件，怎么给组件传参数，怎么用组件的state,事件怎么处理。

react做一个实验

用到：数组，表单，列表

输入框的事件处理函数

表单提交的处理函数

this.setState用法

用户添加东西到列表里面。

如果不用react，可以怎么做呢？

当用户点击添加按钮的时候，

在列表ul里面增加一个li

现在用react做，代码是这样的：

ReactDOM.render(

<TodoApp />,
document.getElementById('example')

);

代码里面，直接调用了TodoApp

这个组件

那么组件TodoApp长什么样的？

组件名：TodoApp

类里面的函数：

constructor函数

里面有参数

items

text

items参数，传给了TodoList组件类

用这个参数来构造列表

这个参数是数组

数据分2个部分，一个部分是id,一个部分是text

render函数

里面有一个表单，表单提交的时候，就调用了一个函数。

表单有什么？一个label，一个输入框。

输入框，发生一个事件，当输入的文本改变的时候，

调用了一个事件处理函数。

这个函数是什么?

handleChange(e){
this.setState({text:e.target.value});
}

这个函数，设置了state里面的text

也就是用户输入了什么，就传给了这个text

这个text记录了用户的输入文本

这个函数是什么？

handleSubmit(e)

当提交表单的时候，

如果文本是空的:

用户没有输入文本，就什么都不做。

否则：

就产生一个数据结构，包括2个字段，有文本和id，id是和时间有关的

然后，更新state

更新他的items和text字段

items保留了这个数据结构，包括2个部分，text和id

所以，在调用TodoList组件的时候，传过去的参数，包括text和id两个部分。

handleChange函数

handleSubmit函数

class TodoApp extends React.Component{

    constructor(props){
       super(props);
       this.state={items:[],text:''};
       this.handleChange=this.handleChange.bind(this);
       this.handleSubmit=this.handleSubmit.bind(this);
     }



    render(){
      return(
           <div>
              <h3>TODO</h3>
              <TodoList items={this.state.items} />
              <form onSubmit={this.handleSubmit}>
                 <label htmlFor="new-todo">
                       what needs to be done?
                  </label>
                 <input id="new-todo" onChange={this.handleChange} value={this.state.text} />
                 <button>
                     Add #
                    {this.state.items.length+1}
                  </button>
              </form>
           </div>


      );

    }




     handleChange(e){

         this.setState({text:e.target.value});
   
       }

     handleSubmit(e){
          e.preventDefault();
         if(!this.state.text.length){

               return;
           }
          const newItem={text:this.state.text,id:Date.now()};
          this.setState(state=>({items:state.items.concat(newItem),text:''}));

       }


}

在函数render里面，调用了另外一个组件

组件名：TodoList

类里面的函数：

render函数

这个组件，返回一个列表

这个组件，接收一个参数

props.items

这个是数组

对数组做了一个映射,map

把数组映射到了列表里面的项li

数组里面的数据分了2个部分，一个部分是id

一个部分是text

每一个li显示的是文本

TodoList这个组件，很容易看懂。

只要传入数组，就返回一个数组映射的列表。

class TodoList extends React.Component{

  render(){
    return(
        <ul>
{this.props.items.map(
item=>(
        <li key={item.id}>
{item.text}</li>
))}
</ul>
 

  );

 }

}

参考：

React – 用于构建用户界面的 JavaScript 库​reactjs.bootcss.com