OnChange 處理程序 ReactJS？

Question

我有一個組件，我將它導入到我的App.js文件中並嘗試設置值和一個onChange方法，我將其作為道具傳遞，但不確定為什么這不起作用。 這是結構的樣子：-

這是我的 app.js 文件：-

import React, { Component } from 'react';
import './App.css';
import Nested from './Nested.js'

class App extends Component {
   state = {
     childState: {
        title: 'New Title',
    }
 }

updateTitle = (e) => {
   const rows = [...this.state.childState];
   rows.title = e.target.value
     this.setState({
       rows,
  });
}


render() {
   return (
     <div className="App">
      <Nested
       title = { this.state.childState.title }
       updateTitle = {this.updateTitle.bind(this) } />
    </div>
   );
 }
}

export default App;

這是我的嵌套組件：-

import React from 'react'

const Nested = (props) => {
    return (
       <div>
          <input value = { props.title } onChange = { props.updateTitle }></input>
      </div>
    )
 }

export default Nested;

如果有人能指出我在上面的updateTitle做錯了什么，我將不勝感激。 謝謝你。

Answer 1

你犯的第一個錯誤是this.state.childState是一個對象，你將它傳播到[] 。 您應該使用{}

其次，您不需要將rows設置為您所在州的屬性。 您應該使用相同的名稱，即childState而不是行

updateTitle = (e) => {
   const childState = {...this.state.childState};
   childState.title = e.target.value
     this.setState({
       childState,
  });
}

Answer 2

你可以這樣使用：

updateTitle = (e) => {
  this.setState(prevState => ({
    ...prevState,
    childState: {
      title: e.target.value,
    },
  }));
}