如何在 react.js 中获取动态文本输入的值？

Question

我在 react.js 项目中制作了一个页面，其中有一个文本输入和一个用于每行数据的按钮。我想通过单击按钮获取每个输入值并对其进行处理。

       {data.map((item, index) => <div><span>{item}</span>
                    <input type="text" placeholder='enter value' />
                    <button onClick={() => {alert(inputValue) }}>
                        click me
                    </button>

                </div>
                )}

Answer 1

你可以这样做

const data = [0, 1, 2, 3];

export default function App() {
  const [inputs, setInputs] = useState({});

  return (
    <div className="App">
      {data.map((item) => (
        <div key={item}>
          <input
            onChange={(e) =>
              setInputs((prev) => {
                return { ...prev, [item]: e.target.value };
              })
            }
          />
          <button onClick={() => alert(inputs[item])}>Click</button>
        </div>
      ))}
    </div>
  );
}

Codesandbox：https://codesandbox.io/s/divine-wildflower-1ge7ev?file=/src/App.js:58-550

Answer 2

正确的反应方式是创建一个独立的组件，例如UserInput 并跟踪用户输入的状态：

// Create state
const [input, setInput] = React.useState('')

return (
  <input type="text" placeholder='enter value'
    onChange={event => setInput(event.target.value)}
  />
  <button onClick={() => {alert(input) }}>
    click me
  </button>
);

然后您可以将其添加到您当前的组件中，如下所示：

{data.map((item, index) => <div><span>{item}</span><UserInput/></div>)}

Answer 3

我建议您使用对象而不是数组。它更适合 key-value 对。如果你使用一个对象，它会更容易，更易读，更易于维护。

如何操作？

您只需要修改代码以循环遍历对象的键，然后每次输入值更改时 (onChange)，然后设置对象的值 onChange={(e) => data[key]=e.target.value}。要在单击字段按钮时访问值，只需使用 data[key].

如何在 react.js 中获取动态文本输入的值？

how to get value in dynamic text input in react.js?

javascript

dynamic

web

reactjs