将状态false设置为地图组件中的检查收音机按钮

Question

function EachData({ data, index, open }) {
  const [isOpen, setisOpen] = useState(open);

  const toggle = (e) => {
    setisOpen((prev) => !prev);      
  };

  return (
    <tr>
      {/*<td></td>'s ... */}
      <td>
        <div className="functions">
          {!isOpen ? (
            <>
              <label className="far fa-edit" htmlFor={`label-${index + 1}`}>
                <input type="radio" name="edit" id={`label-${index + 1}`} onChange={toggle} />
              </label>
              <label className="far fa-trash"></label>
            </>
          ) : (
            <>
              <label className="far fa-circle-check"></label>
              <label className="far fa-times-circle" htmlFor={`label-${index + 1}`} >
                <input type="radio" name="edit" id={`label-${index + 1}`} onChange={toggle} />
              </label>
            </>
          )}
        </div>
      </td>
    </tr>
  );
}

export default EachData;

App.js

array.map((data, index)=>{
  return(
    <EachData data={data} index={index} isOpen={false}/>
  )
})

检查无线电按钮时，JSX按预期更改，但是在检查另一个无线电按钮后，前一个人的状态仍然是正确的。如何将这些元素陈述为false？

Answer 1

您应该将等级状态存储在array数据中，而不是everydata component中

const [array, setArray] = useState();

const toggle = idx => {
    const newArray = array.map((item, index) => {
        if (idx == index) return {
           ...item,
           isOpen: !item.isOpen
        }
        return item
    })
    setArray(newArray);
}

array.map((data, index) => {
    return <EachData data={data} index={index} isOpen={data.isOpen} toggle={toggle} />;
});

function EachData({ data, index, isOpen, toggle }) {
    return (
        <tr>
            {/*<td></td>'s ... */}
            <td>
                <div className="functions">
                    {!isOpen ? (
                        <>
                            <label className="far fa-edit" htmlFor={`label-${index + 1}`}>
                                <input
                                    type="radio"
                                    name="edit"
                                    id={`label-${index + 1}`}
                                    onChange={() => toggle(index)}
                                />
                            </label>
                            <label className="far fa-trash"></label>
                        </>
                    ) : (
                        <>
                            <label className="far fa-circle-check"></label>
                            <label className="far fa-times-circle" htmlFor={`label-${index + 1}`}>
                                <input
                                    type="radio"
                                    name="edit"
                                    id={`label-${index + 1}`}
                                    onChange={() => toggle(index)}
                                />
                            </label>
                        </>
                    )}
                </div>
            </td>
        </tr>
    );
}

Answer 2

您应该使用useref而不是ID，在这里我使用useref进行一些逻辑，希望这会有所帮助。

根据我的理解，当您单击MAP功能中的单击“广播”按钮时，这将被激活，当您单击另一个无线电按钮时，上一个单选按钮仍显示为活动，在此代码中，我创建两个USEREF如您所见，如下代码，所有indexes都采用了第二个代码，第二个用于删除先前的无线电按钮活动。希望您了解此代码，如果您知道DOM。

function EachData({ data, index, open }) {
  const [isOpen, setisOpen] = useState(open);

  const radioRef = useRef([]);
  const previousRadioRef = useRef([]);

  const toggle = (i) => {
    setisOpen((prev) => !prev);
    if (previousRadioRef.current && previousRadioRef.current[0] !== radioRef.current[i]) {
      if (radioRef.current[i]) {
        if (previousRadioRef.current.length) {
        previousRadioRef.current[0].checked = false;
        previousRadioRef.current = [];
      }
      radioRef.current[i].checked = true;
      previousRadioRef.current.push(radioRef.current[i]);
    }
    } else if(previousRadioRef.current && previousRadioRef.current[0]) {
       previousRadioRef.current[0].checked = false;
       previousRadioRef.current = [];
   }
  };

  return (
    <>
      <tr>
      <td>
        <div className="functions">
          {!isOpen ? (
            <>
              <label className="far fa-edit">
                <input type="radio" name="edit" ref={ref => (radioRef.current[index] = ref)} onChange={() => toggle(index)} />
              </label>
              <label className="far fa-trash"></label>
            </>
          ) : (
            <>
              <label className="far fa-circle-check"></label>
              <label className="far fa-times-circle">
                <input type="radio" name="edit" ref={ref => (radioRef.current[index] = ref)} onChange={() => toggle(index)} />
              </label>
            </>
          )}
        </div>
      </td>
    </tr>
    </>
  );
}

export default EachData;


array.map((data, index)=>{
  return(
    <EachData data={data} index={index} open={false}/>
  )
})

Answer 3

您可以用无线电输入的名称设置状态。
参考： http://react.tips/radio-buttons/radio-buttons-in-radio-buttons-in-reactjs/