React hooks - 当同时使用 onChange 和子组件的 prop 时，将更新的值从子组件发送到父组件

Question

我有两个组件 - 父级和子级使用react hooks.

这里，collected是父组件的状态变量。它被传递给TenderInput组件。

const handleBlur = (val) => {
    console.log('::: handleBlur :::');
    console.log(val);
    setCollected(Number(val).toFixed(2));
  }

<TenderedInput
 default={collected}
 focus={focusInput}
 // onChange={handleBlur}
 />

在TenderInput

const TenderedInput = (props) => {
  const [tendered, updateTendered] = useState(props.default);

  const handleChange = (event) => {
    const val = convertToCurrency(event.target.value);
    updateTendered(val);
    // props.onChange(event.target.value); this line causes an issue when I try to update state of parent with this call
  }

  return (
    <div className="collected__amount">
      <input
        type="text"
        className="form__input"
        value={tendered}
        onChange={event => handleChange(event)}
        onFocus={event => event.currentTarget.select()}
        autoFocus={props.focus}
        tabIndex="2"
      />
    </div>
  )
}

TenderInput其textbox事件onChange工作正常并更新组件tendered状态TenderInput。但同时我需要更新父母的状态。现在，collected是 在父级中，如果我添加props.onChange(event.target.value)，collected每次我们在文本框中输入内容并重新渲染组件时都会更新，并且不允许输入正确的值。

我什至尝试添加props.onChange(event.target.value)ononBlur的TenderInput文本框，但随后我需要单击按钮两次才能使其工作。

**如何处理更新子组件的状态并同时更新父组件的状态？**

Answer 1

如果您需要两个（父级和子级）具有相同的状态值，那么为什么不从父级而不是从子级声明和管理该状态呢？因此，在您的父组件中您将拥有：

const [tendered, updateTendered] = useState(props.default);

const handleChange = (event) => {
  const val = convertToCurrency(event.target.value);
  updateTendered(val);
}

return (
  <TenderedInput
    tendered={tendered}
    focus={focusInput}
    onChange={handleChange}
  />
)

在你的孩子身上你会：

const TenderedInput = (props) => {
  return (
    <div className="collected__amount">
      <input
        type="text"
        className="form__input"
        value={props.tendered}
        onChange={event => props.handleChange(event)}
        onFocus={event => event.currentTarget.select()}
        autoFocus={props.focus}
        tabIndex="2"
      />
    </div>
  )
}

因此，这样您就可以从父级而不是子级管理状态，并且两者都将同时处理。