React中如何实现双向绑定

先创建react组件

import React from "react";

class Input extends React.Component {

    render() {
        return (
            <div>
                <input/>
                <p>input框里的值是：</p>
            </div>
        );
    }
}
ReactDOM.render(<App />,document.getElementById('root'));

初始化状态

import React from "react";

class Input extends React.Component {
	state = {
        value: ""
    };
    render() {
        return (
            <div>
                <input/>
                <p>input框里的值是：</p>
            </div>
        );
    }
}
ReactDOM.render(<App />,document.getElementById('root'));

给input定义value属性值为state的value值

import React from "react";

class Input extends React.Component {
	state = {
        value: ""
    };
    render() {
        return (
            <div>
                <input value={this.state.value}/>//给输入框添加value属性 带有value的元素为受控元素
                <p>input框里的值是：{this.state.value}</p>//同步显示被修改的value值
            </div>
        );
    }
}
ReactDOM.render(<App />,document.getElementById('root'));

给input定义onChange属性，值为当前React组件里的方法iptChange

import React from "react";

class Input extends React.Component {
	state = {
        value: ""
    };

	iptChange= (event) => {
        this.setState({//只有setState这一种方法可以修改初始化属性中的state值
            value: event.target.value
        })
    }

    render() {
        return (
            <div>
                <input value={this.state.value} onChange={this.iptChange.bind(this)}/>
                //给输入框添加value属性 带有value的元素为受控元素
                //给输入框添加onChange属性并修正this指向
                //iptChange方法中通过event.target.value方法获取到当前input的值，并赋值给state的value。
                <p>input框里的值是：{this.state.value}</p>//同步显示被修改的value值
            </div>
        );
    }
}
ReactDOM.render(<App />,document.getElementById('root'));

以上为React中input双向绑定问题，如有疑问请留言