React學習之旅----實現類似vue的資料雙向繫結
阿新 • • 發佈:2018-11-11
react沒有資料的雙向繫結,但可以用過一些方法實現:
import React from 'react'; class TodoList extends React.Component { constructor(props) { super(props) this.state = { name: 'React實現資料雙向繫結' } } inputChange = (e) => { this.setState({ name: e.target.value }) } setName = () => { this.setState({ name: 'lisi' }) } render () { return ( <div> <h2>{this.state.name}</h2> <input defaultValue={this.state.name} onChange={this.inputChange} /> <button onClick={this.setName}>點選改變name值</button> </div> ) } } export default TodoList;