用两个组件反应 handleChange 错误答案

【问题标题】：React handleChange error with two components用两个组件反应 handleChange 错误
【发布时间】：2020-04-24 14:01:58
【问题描述】：

我想从第二个组件调用事件 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')}
       />
  )
}

错误出现在 textField 事件的第二个组件 onChange={handleChange('customer')}

TypeError: 无法读取未定义的属性“值”

请帮忙

【问题讨论】：

控制台出现什么错误？
TypeError: 无法读取未定义的属性“值”
可能是因为父组件中的 switch case 你得到这个错误（如果 handleChange 没有传递给每个 case 组件）。你能分享你在 jsfiddle 中运行的代码 sn-p 吗？

标签： javascript reactjs react-hooks

【解决方案1】：

分配给onChange时不要执行handleChange函数。

执行此onChange={handleChange('customer')} 将首先以customer 作为参数调用handleChange 函数，这就是您将Cannot read property 'value' of undefined 作为错误的原因。

不确定customer的值需要什么，但如果你只想用event调用handleChange，你可以把代码改成这样：

<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
      };
    });
  }

【讨论】：

谢谢！错误消失了，但是当我在输入字段上键入时，页面变成了空白页。
更新了答案

【解决方案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 元素的 name 属性，value 是输入内的内容

【讨论】：