React handleChange错误，有两个组件

Question

我想从第二个组件中调用事件handleChange。

主成分。

  const [state, setState] = useState({ step: 1, saleDate: new Date(), customer: '' });

  function nextStep() {
    const { step } = state;
    setState({
      step: step + 1
    });
  };

  function prevStep() {
    const { step } = state;
    setState({
      step: step - 1
    });
  };

  function handleChange(e) {
    setState(e.target.value);
  };


  const { step } = state;

  switch (step) {
    case 1:
      return <SaleStepDate
        nextStep={nextStep}
        handleChange={handleChange}
        values={state} />
  }
}

和第二成分，这里是错误

const SaleStepDate = (props) => {

  function continueStep(e) {
    e.preventDefault();
    props.nextStep();
  };

  const { values, handleChange } = props;

  return (
      <TextField
         placeholder="Nombre cliente"
         label="Cliente"
         name="customer"
         margin="normal"
         fullWidth="true"
         onChange={handleChange('customer')}
       />
  )
}

错误在文本字段事件中的第二个组件onChange={handleChange('customer')}。

TypeError.无法读取未定义的属性'value'。无法读取未定义的属性 "value"。

请帮帮忙

Answer 1

不要执行 handleChange 功能，当分配到 onChange.

这样做 onChange={handleChange('customer')} 会先叫 handleChange 功能与 customer 作为论据，这就是为什么你会得到 Cannot read property 'value' of undefined 为错误。

不知道有什么需要 customer 值，但如果你只是想调用 handleChange 与 event，你可以把代码改成这样。

<TextField
         placeholder="Nombre cliente"
         label="Cliente"
         name="customer"
         margin="normal"
         fullWidth="true"
         onChange={handleChange} //here
       />

编辑： 如果你想通过 customer 使用箭头功能。

onChange={(e) => handleChange(e, 'customer')} 

状态更新器在 useState 默认情况下不更新整个对象。更新一个状态变量总是替换它而不是合并它。

 function handleChange(e) {
    const customer = e.target.value;
    setState(prevState => {
      return {
        ...prevState,
        customer
      };
    });
  }

Answer 2

关于你的代码的几个问题。

首先，因为你是在一个地方存储了多个键。state obj，通过做类似-

---

 setState({
  step: step + 1
});

---

您将删除该对象的所有其他内容。展开其余数据

---

setState({
  ...state,
  step: step + 1
});

---

由于涉及到 handleChange在我看来，它应该是这样的。

---

 function handleChange(e) {
   const { name, value } = e.target
   setState(...state, [name]: value);
 };

---

可谓

---

  onChange={e => handleChange(e)} 

---

name 将成为HTML元素的名称属性。value 输入的内容