如何在React MUI中切换已点击的开关而不是所有开关？

huangapple
go评论93阅读模式
英文:

how to toggle clicked switch instead of all switches in react mui?

问题

这是我在父组件中的状态

  1. const [feedbackType, setFeedbackType] = useState({
  2.   manual: true,
  3.   auto: false,
  4. });

我将这个状态作为 props 传递给子组件。在子组件中，我有以下代码

  1. const handleFeedbackChange = type => {
  2.   setFeedbackType(prevState => ({
  3.     ...prevState,
  4.     manual: type === 'manual',
  5.     auto: type === 'auto',
  6.   }));
  7. };
  9. <div>
  10.   <Switch
  11.     checked={feedbackType.manual}
  12.     onChange={() => handleFeedbackChange('manual')}
  13.     name="manual-feedback"
  14.     inputProps={{ 'aria-label': 'Manual feedback' }}
  15.     color="primary"
  16.   />
  17.   <label htmlFor="manual-feedback">Manual Feedback</label>
  19.   <Switch
  20.     checked={feedbackType.auto}
  21.     onChange={() => handleFeedbackChange('auto')}
  22.     name="auto-feedback"
  23.     inputProps={{ 'aria-label': 'Auto feedback' }}
  24.     color="primary"
  25.   />
  26.   <label htmlFor="auto-feedback">Auto Feedback</label>
  27. </div>

我的问题是，我在子组件上运行 map，所以如果有多个数据，就会有多个开关。所以当我尝试打开和关闭第一个开关时，会影响其他开关。有人可以根据这个改进逻辑吗？我尝试实现一些类似于将 id 作为参数传递给函数然后将其作为参数接收并根据它制定逻辑的东西，但我无法做到这一点。如何在React MUI中切换已点击的开关而不是所有开关？

英文:

this is my state in parent component

  1.   const [feedbackType, setFeedbackType] = useState({
  2.     manual: true,
  3.     auto: false,
  4.   });

i am passing this state as a props to child component.
in child component i have this code

  1. const handleFeedbackChange = type =&gt; {
  2.     setFeedbackType(prevState =&gt; ({
  3.       ...prevState,
  4.       manual: type === &#39;manual&#39;,
  5.       auto: type === &#39;auto&#39;,
  6.     }));
  7.   };
  9.     &lt;div&gt;
  10.           &lt;Switch
  11.             checked={feedbackType.manual}
  12.             onChange={() =&gt; handleFeedbackChange(&#39;manual&#39;)}
  13.             name=&quot;manual-feedback&quot;
  14.             inputProps={{ &#39;aria-label&#39;: &#39;Manual feedback&#39; }}
  15.             color=&quot;primary&quot;
  16.           /&gt;
  17.           &lt;label htmlFor=&quot;manual-feedback&quot;&gt;Manual Feedback&lt;/label&gt;
  19.           &lt;Switch
  20.             checked={feedbackType.auto}
  21.             onChange={() =&gt; {handleFeedbackChange(&#39;auto&#39;)}
  22.             name=&quot;auto-feedback&quot;
  23.             inputProps={{ &#39;aria-label&#39;: &#39;Auto feedback&#39; }}
  24.             color=&quot;primary&quot;
  25.           /&gt;
  26.           &lt;label htmlFor=&quot;auto-feedback&quot;&gt;Auto Feedback&lt;/label&gt;
  27.         &lt;/div&gt;

my issue is i am running map on child component so if i have multiple data then there will be multiple switches. so whenever i try to turn on and off first switch then if effect on other switch as well.
can someone improve the logic according to this?
i try to implement something like passing id as a argument to function then receiving it as a parameter and make logic according to it.but i unable to do this.
如何在React MUI中切换已点击的开关而不是所有开关？

答案1

得分: 1

你应该将你的 useState 移到子组件内部，这样当你遍历数据时，React 会为每个渲染的组件创建特定的状态。现在你在所有组件中只使用了一个 useState 钩子：

父组件：

  1. const ParentComponent = () => {
  2.     
  3.     const data = // 你的数据
  5.     return (
  6.         data.map((item, index) => <ChildComponent key={index} item={item} />)
  7.     )
  8. }

你应该像下面的代码示例一样修改 handleFeedbackChange 函数

子组件：

  1. const ChildComponent = ({ item }) => {
  2.     const [state, setState] = useState({
  3.         manual: true,
  4.         auto: false,
  5.     })
  7.     const handleFeedbackChange = type => {
  8.         if(type === 'manual'){
  9.            setState(prevState => ({
  10.              ...prevState,
  11.              manual: true,
  12.            }));
  13.         } else {
  14.            setState(prevState => ({
  15.              ...prevState,
  16.              auto: true,
  17.            }));
  18.         }
  19.     };
  21.     return (
  22.         <Switch
  23.             checked={state.manual}
  24.             onChange={() => handleFeedbackChange('manual')}
  25.         />
  26.         <Switch
  27.             checked={state.auto}
  28.             onChange={() => handleFeedbackChange('auto')}
  29.         />
  30.     )
  31. }
英文:

you should move your useState inside the child component so that when you map throw the data, react would create a specific state for each rendered component, right now you are using one useState hook for all:

parent component:

  1. const ParentComponent = () =&gt; {
  2.     
  3.     const data = // your data
  5.     return (
  6.         data.map((item, index) =&gt; &lt;ChildComponent key={index} item={item} /&gt;)
  7.     )
  8. }

and you should change the handleFeedbackChange function like the code example bellow

child component:

  1. const ChildComponent = ({ item }) =&gt; {
  2.     const [state, setState] = useState({
  3.         manual: true,
  4.         auto: false,
  5.     })
  7.     const handleFeedbackChange = type =&gt; {\
  8.         if(type === &#39;manual&#39;){
  9.            setState(prevState =&gt; ({
  10.              ...prevState,
  11.              manual: true,
  12.            }));
  13.         } else {
  14.            setState(prevState =&gt; ({
  15.              ...prevState,
  16.              auto: true,
  17.            }));
  18.         }
  19.     };
  21.     return (
  22.         &lt;Switch
  23.             checked={state.manual}
  24.             onChange={() =&gt; handleFeedbackChange(&#39;manual&#39;)}
  25.         /&gt;
  26.         &lt;Switch
  27.             checked={state.auto}
  28.             onChange={() =&gt; handleFeedbackChange(&#39;auto&#39;)}
  29.         /&gt;
  30.     )
  31. }

huangapple
  • 本文由 发表于 2023年6月1日 07:08:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76377793.html
  • javascript
  • material-ui
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定