React中如何从函数式子组件修改类式父组件的state状态？

你现有代码存在几个核心问题，逐个修正即可实现需求：

• props传递链路断裂：App组件传给User的edit回调，User既没有接收也没有透传给Input，Input里直接调用edit肯定会报错
• App状态更新逻辑错误：你的handleChangeName里用map直接修改所有用户的姓名，且返回的是字符串而非用户对象，会导致state里的users结构被破坏，另外你现在传给回调的是渲染时的旧姓名，根本拿不到Input里的新输入值
• Input事件绑定错误：按钮的onClick直接执行了函数而非绑定点击回调，用原生querySelector取输入值也不符合React的设计规范，容易出现匹配错误

修正后代码 #

App.jsx #

// 引入User组件
import User from './User'

class App extends React.Component {
  state = {
    users : [
      {id: 1, fullName: 'Amirreza Amini'},
      {id: 2, fullName: 'John Smith'}
    ]
  };

  // 接收用户id和新姓名，只修改对应id的用户
  handleChangeName = (userId, newName) => {
    const editedUsers = this.state.users.map(user => {
      // 匹配到对应用户才修改姓名，其余保持不变
      if (user.id === userId) {
        return {...user, fullName: newName}
      }
      return user
    })
    this.setState({ users: editedUsers });
  };

  render() {
    const { users } = this.state;
    return (
      <div>
        {users.map(user => (
          <User
            key={user.id}
            userId={user.id}
            fullName={user.fullName}
            // 把用户id先绑定到回调里，后面Input只需要传新姓名即可
            edit={(newName) => this.handleChangeName(user.id, newName)}
          />
        ))}
      </div>
    )
  }
}
export default App

User.jsx #

import Input from './Input'

// 接收父组件传的edit回调，透传给Input
const User = ({ fullName, edit }) => {
  return (
    <section>
      <h1>{ fullName }</h1>
      <Input fullName={fullName} edit={edit} />
    </section>
  );
};
export default User;

Input.jsx #

import { useRef } from 'react'

const Input = ({ fullName, edit }) => {
  // 用useRef获取输入框的值，不需要受控组件的话这是最简便的方式
  const inputRef = useRef(null)
  return (
    <section>
      <input 
        ref={inputRef}
        className="user-edit-input" 
        placeholder={fullName} 
      />
      <button 
        className="edit-button" 
        // 点击时再取输入框的值传给edit回调
        onClick={() => edit(inputRef.current.value)}
      >
        修改
      </button>
    </section>
  );
};
export default Input;

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