0

我想从第二个组件调用事件 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：无法读取未定义的属性“值”

请帮忙

4

2 回答 2

1

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

这样做onChange={handleChange('customer')}会首先handleChange使用 as 参数调用函数customer，这就是为什么你会得到Cannot read property 'value' of undefined错误。

不确定customervalue 的需要是什么，但是如果您只想调用handleChangewith 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
      };
    });
  }
于 2020-04-24T14:07:23.837 回答
1

关于您的代码的几个问题，

首先，因为您在一个stateobj 中存储多个键，所以通过执行以下操作 -

 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输入中的内容

于 2020-04-24T14:24:50.257 回答