首页 > itarticle > react的表单与事件

react的表单与事件

admin 11月 12, 2020 0

onChange表单事件

输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。

var HelloMessage = React.createClass({
    getInitialState:  () {
        return {value: 'hello younghearts!'}
    },
    handleChange: function (event) {
        this.setState({value: event.target.value})
    },
    render:  () {
        var value = this.state.value;
        return <div>
                    <input type="text" value={value} onChange={this.handleChange}/>
                    <h3>{value}</h3>
                </div>
    }
});
ReactDOM.render(
        <HelloMessage />,
        document.getElementById('example')
)

React 事件

通过 onClick 事件来修改数据：

var HelloMessage = React.createClass({
    getInitialState:  () {
        return {value: 'hello younghearts!'}
    },
    handleChange:  () {
        this.setState({value: 'younghearts'})
    },
    render:  () {
        var value = this.state.value;
        return <div>
            <button onClick={this.handleChange}>点我</button>
            <h3>{value}</h3>
        </div>
    }
});
ReactDOM.render(
        <HelloMessage />,
        document.getElementById('example')
)