class CheckItem extends Component{
  constructor(props){
    super(props);

    this.state = {};

    this.toggle = this.toggle.bind(this);
  }

  toggle(e){
    this.props.onToggle(Boolean(e.target.value), this.props.index);
  }

  render(){
    return (
      <div className="inline">
        <input type="checkbox" checked={this.props.state} value={this.props.state} onChange={this.toggle} disabled={this.props.state} className="mr-2" />
        <label className={this.props.state? 'line-through' : ''}>{this.props.text}</label>
      </div>
    )
  }
}

class ToDoList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      pendingValue:'',
      list:[
        {text:'sweeping floor', state:false},
      ],
    };

    this.addItem = this.addItem.bind(this);
    this.changePendingValue = this.changePendingValue.bind(this);
    this.toggle = this.toggle.bind(this);
  }

  changePendingValue(e){
    this.setState({
      pendingValue:e.target.value
    });
  }

  addItem(){
    this.setState((state) => {
      state.list.push({text:this.state.pendingValue, state:false});
    });

    this.setState({
      pendingValue:''
    })
  }

  toggle(value, index){
    const copiedList = JSON.parse(JSON.stringify(this.state.list));

    copiedList.splice(index, index + 1, {
      text:copiedList[index].text,
      state:value
    });

    this.setState({
      list:copiedList
    });
  }

  render() { 
    return (
      <div>
        <input type="text" value={this.state.pendingValue} className="p-2" onChange={this.changePendingValue}/>
        <button className="bg-blue-400 p-2 ml-2 rounded text-white" onClick={this.addItem}>add</button>

        <ul className='flex flex-col'>
          {this.state.list.map((i, index) => <CheckItem text={i.text} state={i.state} onToggle={this.toggle} key={index} index={index}></CheckItem>)}
        </ul>
      </div>
    );
  }
}

用起來會長這樣

你可以發現ToDoList完全不依賴App

class App extends Component {
  state = {

  };

  render(){
    return (
      <div className="container">
        <ToDoList></ToDoList>
      </div>
    )
  };
}

export default App;

當有多個controlled element時，可以在controlled element加上name屬性方便區分

但這樣可能導致一個controlled component裡面有太多變數、event handler，所以官方推薦大多情況用uncontrolled component來實作表單

uncontrolled component

uncontrolled component是甚麼

uncontrolled component常用於file input

它是用ref來取得DOM的資料(這點在react-hook-form裡可以看到)，而不為每個state的更新寫event handler

uncontrolled component有以下優點

更容易整合React和非React的程式碼，且能減少程式碼
不用setState()，效能會比較好可以

雖然有這些優點，但其實這作法滿髒的，官方推薦通常還是盡量使用controlled component

例子

class Form extends Component {
  constructor(props) {
    super(props);
    this.state = {
      previewUrl:'',
      previewFileName:''
    };

    this.fileInput = React.createRef();
    this.fileInputClick = this.fileInputClick.bind(this);
    this.changePreview = this.changePreview.bind(this);
  }

  fileInputClick() {
    this.fileInput.current.click();
  }

  changePreview(e){
    const files = e.target.files;
    const reader = new FileReader();

    reader.onload = (e) => {
      this.setState({
        previewUrl:e.target.result,
        previewFileName:files[0].name
      });
    }

    reader.readAsDataURL(files[0]);    
  }

  render() { 
    return (<div>
      <img src={this.state.previewUrl} alt="" className='w-32'/>

      <div className='flex'>
        {/* 把醜醜的fileInput藏起來 */}
        <input type="file" className='hidden' ref={this.fileInput} onChange={this.changePreview}/>

        {/* 用一個input和button替代它放在畫面上 */}
        <input type="text" value={this.state.previewFileName} disabled placeholder='name of file' className='p-2 rounded-l'/>
        {/* 按了這個button相當於按了fileInput */}
        <button type="button" onClick={this.fileInputClick} className="p-2 bg-blue-400 text-white rounded-r">choose file</button>
      </div>
    </div>);
  }
}