React handleChange错误,有两个组件

我想从第二个组件中调用事件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”。

请帮帮忙

解决方案:

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

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

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

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

Python:如何在pandas数据框中基于delta时间选择行?

2022-9-9 6:03:19

未分类

Angular。在routerLink里面做一个routerLink。

2022-9-9 6:03:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索