1. 程式人生 > >React學習之旅----實現類似vue的資料雙向繫結

React學習之旅----實現類似vue的資料雙向繫結

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;