在 React/Javascript 中具有动态禁用的多个输入项

Question

我想在 React native 的列表项中创建多个输入框。条件是用户只能输入1行。

例如：

-输入框1 输入框2

    Input box 1.   Input box2
    Input box 1.   Input box2

以上是示例布局。条件是用户可以输入任何行项目。但是如果用户在第一行的 Input box1 中输入，则应该禁用第二行和第三行的输入框。

或者如果他/她在 2nd 输入，那么 1st 和 3rd 输入框 1 应该被禁用。

我不知道如何实现这个逻辑

Answer 1

这是我根据你的解释写的：

import React, { useState } from 'react';

function App() {
  const [disabledRow, setDisabledRow] = useState(0);
  const [values, setValues] = useState(['', '', '', '']);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    // Get the row attribute so we can know which row the user is chaning.
    const row = parseInt(event.target.dataset.inputRow || '10', 10);
    // Get the input Id so we will change the corresponding value in 'values' state.
    const inputId = parseInt(event.target.dataset.inputId || '0', 10);

    // Change the corresponding value in state.
    values[inputId] = event.target.value;
    setValues([...values]);

    // Disabled the other row
    if (row === 1) {
      setDisabledRow(2);
    } else {
      setDisabledRow(1);
    }
  };

  return (
    <>
      <div>
        {/* Row 1 */}
        <input
          data-input-row={1}
          data-input-id={0}
          disabled={disabledRow === 1}
          onChange={handleChange}
          value={values[0]}
        />
        <input
          data-input-row={1}
          data-input-id={1}
          disabled={disabledRow === 1}
          onChange={handleChange}
          value={values[1]}
        />
      </div>
      {/* Row 2 */}
      <div>
        <input
          data-input-row={2}
          data-input-id={2}
          disabled={disabledRow === 2}
          onChange={handleChange}
          value={values[2]}
        />
        <input
          data-input-row={2}
          data-input-id={3}
          disabled={disabledRow === 2}
          onChange={handleChange}
          value={values[3]}
        />
      </div>
    </>
  );
}

export default App;