如何在 React 中使用 useRef 的值触发状态

Question

在 React 中，我有一个带有输入和按钮的表单。我使用 useRef 来控制输入的实际值。我希望当输入文本为空时禁用按钮，但是当使用 useRef 时我无法触发重新渲染。好的做法是使用 useState() 来控制输入状态吗？对于这种情况还有其他解决方案吗？

<TitleInputText
          name=''
          type='text'
          title={inputTitle} 
          placeholder={inputPlaceholder}
          onChange={(value) => (graphicName.current = value)}
        />`

`export const TitleInputText: FC<TitleInputTextProps> = ({
  title,
  type,
  name,
  placeholder,
  onChange,
}) => {
  return (
    <S.Container data-testid='title-input'>
      <Title label={title} size='small' />
      <S.InputTitleAnalytic
        type={type}
        name={name}
        placeholder={placeholder}
        onChange={(e) => {
          if (onChange) onChange(e.target.value)
        }}
      />
    </S.Container>
  )
}

12345678910123432112312

Answer 1

使用

useState

输入就可以了

if (onChange) onChange(e.target.value)

也可以替换为

onChange?.(e.target.value)