javascript - OnChange 处理程序 ReactJS？

Question

我有一个组件，我将其导入到我的 App.js 文件中，并尝试设置值和一个 onChange 方法，我将其作为 props 传递下来，但不是确定为什么这不起作用。结构如下:-

这是我的 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 而不是 rows

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