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

【问题标题】：Use mapping function to render buttons and how can each button works independently in React js使用映射函数渲染按钮以及每个按钮如何在 React js 中独立工作
【发布时间】：2021-09-21 19:53:38
【问题描述】：

我这里有3组按钮，我想在点击一次后禁用“取消按钮”，反之亦然。

但是，当我禁用第一组的“取消”按钮时，其他组的“取消”按钮也将被禁用。

在这种情况下，我只想从第一个设置中禁用“取消”按钮。

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

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

注意**我正在使用映射功能来呈现按钮

我的客户端：

 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 用户界面

【问题讨论】：

向按钮组件添加一个禁用或禁用的道具，因为它现在正在使用“全局”一个并且您使用的每个按钮都遵循这一点
您好，请您详细说明一下，因为我是 React 新手。或者你可以给我一个例子。谢谢。
基本上const button = ({index, disabled}) => { 然后，当您映射时，您将两个值都传递给它：return button({index: number, disabled: true/false})
@jackson 查看编辑。

标签： node.js reactjs electron

【解决方案1】：

您已经很接近了，您可以使用disable 中的数组来控制启用哪个元素。

***编辑***

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

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

【讨论】：

您好，感谢您的回复，但它不起作用。我错过了什么吗？
谢谢兄弟！你的解决方案对我有用！