React中input动态取值和赋值的方法是什么

React

小亿

381

2024-01-23 14:31:08

栏目: 编程语言

在React中，可以通过useState来实现input动态取值和赋值。

首先，需要导入useState：

import React, { useState } from 'react';

然后，在组件中定义一个状态变量和相应的更新函数：

const [inputValue, setInputValue] = useState('');

接下来，将输入框的值绑定到状态变量上，并通过更新函数来更新状态变量的值：

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

通过设置value={inputValue}，可以将状态变量的值绑定到输入框上。当输入框的值发生变化时，onChange事件会触发，并通过更新函数setInputValue来更新状态变量的值。

最后，可以通过inputValue来获取输入框的值，并进行相应的处理。

完整示例代码如下：

import React, { useState } from 'react';

const App = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input
        type="text"
        value={inputValue}
        onChange={e => setInputValue(e.target.value)}
      />
      <p>输入的值是：{inputValue}</p>
    </div>
  );
}

export default App;

在上述示例中，输入框的值会实时显示在下方的<p>标签中。

React中input动态取值和赋值的方法是什么

最新问答

相关标签