React-State和表单

1、定义State

（1）在constructor中实现state

（2）在constructor中通过bind绑定事件函数（事件函数是用来改变状态）

（3）在事件函数内部使用setState函数更改状态

（4）在组件中的render函数中使用该状态

（5）在组件上需要设置监听事件，去触发事件函数的执行

import React from 'react';
class Show extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPosition: 0
        }  
        //this.change = this.change.bind(this)
    }
    change() {
        this.setState({
            currentPosition: this.state.currentPosition+1
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.change.bind(this)}>点击增加数字</button><br />
                <div>{this.state.currentPosition}</div>
            </div>
        );
    }
}
export default Show;

2、State 与 Props 区别

• State是可变的，通过setState()函数来改变，是组件内部维护的一组用于反映组件UI变化的状态集合；
• Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。在组件状态上移的场景中，父组件正是通过子组件的Props, 传递给子组件其所需要的状态。
• 通过属性将父组件的状态传递到子组件，那么父组件的状态发生变化时，子组件的属性也会改变
• State定义在constructor内部，在super(props)代码后面；Props定义在类（组件）的外部

3、状态上移

当存在多个组件共同依赖一个状态时，一般的做法是状态上移，将这个状态放到这几个组件的公共父组件中

//父组件
componentDidMount() {
    setInterval(() => {
        this.setState({
            index: this.state.index + 1
        })
    }, 2000)
}
<div>
    <One index={this.state.index} />
    <Two index={this.state.index}/>
</div>

//子组件1
<img src={this.imgArr[this.props.index % 3].imgUrl} alt="" />
//子组件2
<div className="one" style={{ backgroundColor: this.colorArr[this.props.index % 3] }}></div>

4、React表单组件

React中的表单组件大致可分为两类：

• 受控组件：一般涉及到表单元素时我们才会使用这种分类方法。受控组件的值由props或state传入，用户在元素上交互或输入内容会引起应用state的改变。在state改变之后重新渲染组件，我们才能在页面中看到元素中值的变化，假如组件没有绑定事件处理函数改变state，用户的输入是不会起到任何效果的，这也就是“受控”的含义所在。
• 非受控组件：类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。

受控组件

//受控组件
this.state = {
    value: "默认值"
}
change(event) {
    this.setState({value: event.target.value})
}
<div>
    <input type="text" value={this.state.value} onChange={this.change.bind(this)} />
    <p> {this.state.value} </p>
</div>

//非受控组件
<input type="text" defaultValue="hello!"/>

5、JSX识别HTML标签

让JSX识别HTML标签：将字符串标签转为具体的标签

constructor(props) {
    super(props);
    this.state = {}
    this.b = "<span style='color: red'>这是一个HTML元素</span>"
}

//使用
<div dangerouslySetInnerHTML={{ __html: this.b }}></div>

6、父子组件传值

子组件使用表单元素，value的值通过props从父组件传递，onChange事件函数也是通过props从父组件传递的

<!--父组件-->
this.state = {
    num: 0
}
changeNum() {
    this.setState({
        num: this.state.num + 1
    })
}
<!--可以在子组件中传递多个参数，接收时使用...操作符-->
getSon(...val) {
    console.log(val)
}
<One num={this.state.num} changeNum={this.changeNum.bind(this)} />
<Son sendFather={this.getSon.bind(this)} />
<!--父向子传值-->
<Two num={this.state.num} />

<!--子组件1-->
<!--子组件更新父组件-->
<button onClick={this.props.changeNum}>点击改变数据{this.props.num}</button>
<!--子向父传值-->
<button onClick={this.props.sendFather.bind(this, "这是要传递的参数", 111, true)}>点击传递数据到父组件</button>

<!--子组件2-->
<h2>{this.props.num}</h2>