react实现表单数据的更改

在react中 如果给input标签加了value属性就会报下面这个错误

You provided a `value` prop to a form field without an `onChange` handler.  This will render a read-only field.  If the field should be mutable use `defaultValue`.  Otherwise, set either `onChange` or `readOnly`.

意思是:

你在没有' onChange '处理程序的情况下为表单字段提供了' value '支持。 这将呈现一个只读字段。 如果字段应该是可变的，请使用' defaultValue '。 否则，设置' onChange '或' readOnly '。

读了上面这段报错相信你已经知道该怎么解决了

解决方法:

1, 给标签加onChange事件 称之为受控组件

2, 把value属性改为defaultValue /defaultChecked

        可实现input框可以输入的效果,但是这个给方法不能实现双向绑定的效果, 在输入框输入数据不会引起this.state.msg的改变, 使用setState改变this.state.msg也不会改变绑定了defaultValue属性的输入框 ,称之为非受控组件

3, 给input标签添加只读属性 readOnly

import React, { Component } from 'react';

class Base extends Component {
    state = {
        msg: 'hahhahahaha'
    }
    render() {
        return (
            <div>
                <input type="text" value={this.state.msg} readOnly/>
                <input type="text" defaultValue={this.state.msg}/>
                <input type="text" value={this.state.msg} onChange={ (e) => this.handler(e) }/>
            </div>
        );
    }
    handler(e){
        let val = e.target.value
        this.setState({
            msg: val
        })
    }
}

export default Base;

注意: 以上代码返回是jsx格式的