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

问题描述

我这里有 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 用户界面

标签： node.jsreactjselectron

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

*** 编辑 ***

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

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

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

问题描述

解决方案

推荐阅读