React开发待办列表时，如何实现子组件向父组件传值？

在React里，子组件没法直接修改父组件的状态，得通过父组件传回调函数给子组件，子组件调用这个函数把数据传回去的方式实现。针对你的待办列表需求，按以下步骤改代码就行：

步骤1：在父组件App中定义添加待办项的函数并传给Form #

在App组件里新增一个addItem函数，用来更新items数组，然后把这个函数作为props传给Form组件：

const App = () => {
  const [items, setItems] = React.useState([
    'First To Do',
    'Second To Do',
    'Third To Do',
  ]);  

  // 定义添加待办项的函数
  const addItem = (newItem) => {
    // 避免添加空项
    if (newItem.trim()) {
      setItems(prevItems => [...prevItems, newItem]);
    }
  };

  return (
    <div className='app'>
      {/* 把addItem作为props传给Form */}
      <Form onAddItem={addItem} />
      <ToDoList items={items} />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

步骤2：在子组件Form中接收回调并提交时调用 #

修改Form组件，接收父组件传来的onAddItem函数，在表单提交时调用它，把输入框的value传过去：

const Form = ({ onAddItem }) => { // 解构接收props中的onAddItem
  const [value, setValue] = React.useState('');

  function handleValueChange(e) {
    setValue(e.target.value);
  }

  function handleSubmit(e) {
    e.preventDefault();
    // 调用父组件传来的回调函数，传递输入值
    onAddItem(value);
    alert('New To Do was added.');
    setValue('');
  }

  return (
    <div className={classes.addingForm}>
        <form onSubmit={handleSubmit}>
            <input className={classes.myInput} type='text' value={value} onChange={handleValueChange}/>
            <input className={classes.mySubmit} type='submit' value='Submit' />
        </form>
    </div>
  )
};

export default Form;

关键说明 #

• 用setItems(prevItems => [...prevItems, newItem])的方式更新数组，是因为React的状态更新要保持不可变性，不能直接用push修改原数组
• 加了newItem.trim()判断，防止用户提交空的待办项

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