如何 select 默认情况下在循环内的所有单选按钮

Question

我是 React 新手，我想 select 地图中的所有单选按钮 loop.I 我正在设置 defaultChecked={index}，但它只是 select 最后一个单选按钮checked 道具也是如此。请帮助我。

availableCars.map((item, index) => (
  <div className="item" key={index}>
    <div className="carbox">
      <div className="bluebg" />
      <div className="choosedesc">
        <h4>{item.vehicle_name}</h4>
      </div>
      <div>
        <div className="selecttrip">
          {!roundTrip || !oneWayTrip ? (
            <React.Fragment>
              {selectTripTypeError}
            </React.Fragment>
          ) : null}
          <label className="radiowrap">
            Round Trip{' '}
            <span className="blue">
              {item.rt_price}
              {item.currency == 'EUR'
                ? '€'
                : 'GBP'
                  ? '£'
                  : item.currency}
            </span>
            <input
              type="radio"
              value={item.rt_price}
              defaultChecked={index}
              onChange={e =>
                onRoundTripChecked(
                  item.rt_price,
                  item.vehicle_id,
                  item.currency,
                  item.seconds_before_pick,
                  item.max_pax,
                  item.release_hours,
                )
              }
              name="radio"
            />
            <span className="checkmark" />
          </label>

        </div>

      </div>
    </div>
  </div>
))

Answer 1

I am setting defaultChecked={index}, but it only selects the last radio button and the same is true for checked prop.

这是因为它们都属于同一个无线电组（您在代码中定义为 name="radio"）。

来自MDN：

A radio group is defined by giving each of radio buttons in the group the same name. Once a radio group is established, selecting any radio button in that group automatically deselects any currently-selected radio button in the same group.

尝试为您的单选按钮指定唯一的名称：

const App = () => {
  let sampleArray = ["foo","bar","joe"];
  
  return (
    <div>
      {sampleArray.map(function(value, index){
        return (
          <div>
            <input
              type="radio"
              defaultChecked={true}
              name={`radio-${index}`}
            />
            <label>{value}</label>
          </div>
        )
      })}
    </div>
  )
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

从用户体验的角度来看，单选输入通常用于指示从输入组中进行的选择。在撰写本文时我看不到您的项目布局，但我建议您考虑使用 checkboxes.

最后，我建议将布尔值传递给 defaultChecked prop。如果传递的是 falsy，则传递索引将无法将 checked 属性设置为 true。

如何 select 默认情况下在循环内的所有单选按钮

How to select all radio button by default inside loop in react

radio-button

reactjs