React类组件input与textarea输入值无法同步到note状态的setState写法问题

核心setState修正写法 #

你需要使用展开运算符合并原有note对象+计算属性匹配对应字段，同时由于setState是异步API，要拿到更新后的state需要在setState的第二个回调参数中打印：

this.setState(prevState => ({
  note: {
    // 展开原有note的属性，避免更新title时丢失content、反之亦然
    ...prevState.note,
    // 用计算属性根据表单name属性匹配对应state字段
    [name]: value
  }
}), () => {
  // 回调会在state更新完成后触发，此处打印的是最新的state值
  console.log('更新完成后的state：', this.state)
})

其他需要同步修正的代码错误 #

• 类定义语法错误：extend 改为 extends，React.component 改为 React.Component（类名首字母必须大写）
• 类内的事件方法不能加const声明，直接用箭头函数即可自动绑定this指向
• textarea的name属性拼写错误：contant改为content，和state内的字段保持一致
• render内访问state必须加this.state.前缀，表单value要写为this.state.note.title、this.state.note.content
• 事件绑定要加this.前缀：onChange={inputEvent}改为onChange={this.inputEvent}
• render返回的JSX必须有唯一根节点，补充React空标签包裹多个表单元素

完整修正后代码 #

import React  from 'react';
export default class CreateNote extends React.Component {
  constructor(props) {
    super(props);
    this.state = {note:{title:"",content:""}};
    console.log('初始state：', this.state);
  }
  
  inputEvent = (event) => {
    const value = event.target.value;
    const name = event.target.name;
    this.setState(prevState => ({
      note: {
        ...prevState.note,
        [name]: value
      }
    }), () => {
      console.log('更新后的state：', this.state)
    })
  }

  render(){ 
    return(
      <>
        <input 
          type="text" 
          placeholder="Title"
          name="title"
          value={this.state.note.title}
          onChange={this.inputEvent}
        /> 
        <textarea 
          name="content" 
          value={this.state.note.content}
          cols="30" 
          rows="10"
          placeholder="Write a Notes"
          onChange={this.inputEvent}
        >
        </textarea>
      </>
    )
  }
}

内容的提问来源于stack exchange，提问作者Amdadul Haque