设置一个单选按钮要检查为默认值

Question

假设我在React中具有这样的函数，

function Stars({handleStarClick, starClicked}) {

    if (starClicked === 3) {
      document.getElementById('star3').checked = true
    }

    return (

    <div className="rate">
        <input onClick={() => handleStarClick(5)} type="radio" id="star5" name="rate" value="5"/>
        <label htmlFor="star5" title="text">5 stars</label>
        <input onClick={() => handleStarClick(4)}  type="radio" id="star4" name="rate" value="4" />
        <label htmlFor="star4" title="text">4 stars</label>
        <input onClick={() => handleStarClick(3)}  type="radio" id="star3" name="rate" value="3" />
        <label htmlFor="star3" title="text">3 stars</label>
        <input onClick={() => handleStarClick(2)}  type="radio" id="star2" name="rate" value="2" />
        <label htmlFor="star2" title="text">2 stars</label>
        <input onClick={() => handleStarClick(1)}  type="radio" id="star1" name="rate" value="1" />
        <label htmlFor="star1" title="text">1 star</label>
    </div>
    )
}

我希望默认行为未选中所有无线电按钮。但是，假设用户选择三星级广播按钮，我希望能够传递一个使我可以通过检查的三星级广播按钮来渲染该组件的道具。最好的方法是什么？

Answer 1

在React中，您不应使用document.getElementById（）访问DOM元素。应该使用 react ref refs refs 进行完成。在这种情况下，您可以避免它。

您可以将以下内容用作使其正常工作的道具：

checked={index === starClicked}

您的代码可以如下简化：

function Stars({ handleStarClick, starClicked }) {
  return (
    <div className="rate">
      {Array.from({ length: 5 }, (_, i) => {
        const index = 5 - i;
        return (
          <React.Fragment key={index}>
            <input
              onChange={() => handleStarClick(index)}
              checked={index === starClicked}
              type="radio"
              id={`star${index}`}
              name="rate"
              value={index}
            />
            <label htmlFor={`star${index}`} title="text">
              {index} stars
            </label>
          </React.Fragment>
        );
      })}
    </div>
  );
}

function App() {
  const [starClicked, handleStarClick] = React.useState(-1);

  return <Stars handleStarClick={handleStarClick} starClicked={starClicked} />;
}

ReactDOM.render(<App />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>