Question

我通过以下方式定义了一个在ReactJS中使用UseState Hook的常量：

const [inputValue, setInputValue] = useState("")

以某种方式为表单使用inputValue：

<form
      data-testid="form"
      onSubmit={e => {
        e.preventDefault();
        setLogFilters({
          queryText: inputValue
 });
      }}
    >

我可以使用以下代码段在表单中输入字符串：

<Input
          name="input1"
          type="text"
          onChange={e => setInputValue(e.target.value)}
/>

我现在有一个按钮，onclick应该清除以下形式的字符串输入：

<Button
        onClick={() => {
          setInputValue("");
}}
>

但是表单保留了原始字符串，并且状态未设置为null字符串。怎么了？为什么该钩子无法更新状态？

Answer 1

正如@Corentin所提到的，当您有任何输入字段并且希望在编写内容时更改其值时，您需要为此设置一个状态，就像您有一个名称为export default class NavBar extends Component { constructor(props) { super(props); this.state: { createmap: false; } } }的状态一样您需要通过export default class Kartta extends Component { constructor(props) { super(props); } componentDidMount() { if(this.props.createmap) { fetchAll(); } }属性（即

）将此状态与您的输入绑定

inputValue

现在，当您设置value状态时，该值将更改。

Answer 2

要使用钩子更改输入的值，必须在输入中初始化状态，例如“值”。

示例：

function onClick () {
  setYourState('Blabla')
}

<input placeholder='Enter blabla' value={yourState} onChange={(e) => setYourState(e.target.value)}></input>

Answer 3

您的输入字段没有value属性，它应如下所示：

<Input
    name="input1"
    type="text"
    value={inputValue}
    onChange={e => setInputValue(e.target.value)}
/>

为什么在onClick之后，我的钩子无法更新状态？

3 个答案: