在 reactJs onChangeHandler 方法無法正常工作

Question

我正在嘗試使用 Reactjs 制作一個 TO DO 列表應用程序。當我鍵入標題時，onChangeTitleHandler 沒有設置標題的 state，onChangeTaskHandler 也會發生同樣的情況。 新的 state 沒有設置。

這是駕駛艙組件。

const cockpit = (props) => {
    return (
        <div>
            <form onSubmit={props.submitted}>
                <input type="text" placeholder="Title" onChange={props.ChangeTitle} />
                <textarea rows={2} onChange={props.changeTask} />
                <input type='submit' value='ADD TASK'/>
            </form>
        </div>
    );
}

這是我試過的代碼。

這是我的 App.js 文件

import "./App.css";
import { React, Component } from "react";
import Cockpit from "./Components/Cockpit";

class App extends Component {

  state = {
    title:'',
    task: '',
    allTask : [] 
  };

  onChangeTitleHandler = (event)=>{
    this.setState={
      title: event.target.value,
    }
    console.log(this.state.title);
  }
  
  onChangeTaskHandler =(event)=>{
    this.setState={
      task: event.target.value,
    }
    console.log(this.state.title);
  }

  onSubmitHandler =(event) => {
    const tasks = this.state.allTask;
    tasks.push({
      title:this.state.title,
      task:this.state.task
    })

    this.setState={
      allTask:tasks
    }
    console.log(tasks);
    event.preventDefault();
  };

  render() {
    return (
      <div className="App">
        <h1 className="heading">Prioritise Your Tasks</h1>
        <Cockpit 
        ChangeTitle = {this.onChangeTitleHandler}
        changeTask={this.onChangeTaskHandler}
        submitted = {this.onSubmitHandler}
        />
      </div>
    );
  }
}

export default App;

我希望將新的 state 標題和任務添加到 allTask 數組中。

Answer 1

在您的示例中有很多令人困惑或錯誤的事情。

主要是 Nils 指出的：您正在為setState function 分配一個值，而不是按預期使用它（調用它）。

所以而不是

  onChangeTaskHandler =(event)=>{
    this.setState={
      task: event.target.value,
    }
    console.log(this.state.title);
  }

你需要做

  onChangeTaskHandler = event => {
    this.setState({ task: event.target.value })
  }

這讓我想到另一件事可能會混淆您的“輸出”，即您在調用this.setState function 后立即記錄this.state.title 。這不會有您預期的結果，因為setState function 是異步的，因此可能不會像您需要的那樣快，因為它無法在console.log調用中顯示更新后的 state。

作為后一點，從我個人的角度來看，您的代碼風格在命名事物的方式上有些混亂。 向 onSubmit function 處理程序調用“已submitted ”聽起來更像是 boolean，而不是 function。具有以大寫字母開頭的屬性，如ChangeTitle ，可能通常被解釋為反應節點或某種類型的 class。

此外，對於您的示例，一個好主意是將任務容器的 state 從任務本身的容器中拆分出來。 容器 state 只是數組，每個任務項處理它自己的 state（標題和描述）。 我認為這將使您更清楚地了解您要實現的目標。

但是，拋開慣例和清晰度不談，我建議您按照 go 的React 動手教程，通過一大堆概念和良好實踐，這些概念和良好實踐可能會有所幫助，並且會為您節省大量嘗試和錯誤的時間（位於至少這對我有用）