使用映射函数渲染按钮以及每个按钮如何在React js中独立工作

Question

我这里有3组按钮，我想点击一次后禁用'cancel button'，反之亦然

然而，当我禁用第一组的 'cancel' 按钮时，其他组的 'cancel' 按钮也会被禁用。

在这种情况下，我只想从第一组中禁用 'cancel' 按钮。

我该如何解决这个问题，或者有什么方法可以解决这个问题。

我们将不胜感激任何帮助和建议

注意 ** 我正在使用映射函数来呈现按钮

我的客户端：

 function App() {
  const [taskNumber, setTaskNumber] = useState('')
  const [disable, setDisable] = useState(true)
  const onChange = (e) => {
  setTaskNumber(e.target.value)
  }

  const onClick = () => {
   console.log('world')
   setDisable(!disable)
  }


  const button = (index) => {
return (
  < div >
    <button onClick={() => onClick()} disabled={!disable}>hello</button>
    <button onClick={() => onClick()} disabled={disable}>cancel</button>
  </div >
)
}

  let items = []

 for (let i = 0; i < taskNumber; i++) {
   // items.push(button(i))
   items.push(i)
  }


   <Form>

    <Form.Group as={Col}>
      <Form.Label>Number of Task</Form.Label>
      <Form.Control
        type="number"
        min='1'
        placeholder="Enter number of task"
        name='taskNumber'
        value={taskNumber}
        onChange={onChange}
      />


    </Form.Group>
  </Form>
  {items.map((number) => {
    return button(number)
  })}

我的 React 用户界面

Answer 1

你很接近，你可以在disable中使用数组来控制启用哪个元素。

*** 编辑 ***

我无法访问您正在使用的表单组件，所以我只是做了一个更基本的示例供您参考。看我的codesandbox:

https://codesandbox.io/s/prod-fast-0zneb?file=/src/App.js

使用映射函数渲染按钮以及每个按钮如何在React js中独立工作

Use mapping function to render buttons and how can each button works independently in React js

node.js

reactjs

electron