如何修复当前单选按钮以单独单击以解决单独的问题

Question

我正在尝试提出一些问题来评估旧设备的价格。从后端我收到多个问题，我必须为 YES/NO 的问题提供一个单选按钮以进行选择， 但是当我单击一个单选按钮时，其他按钮也会被单击。如何解决这个问题。

我的代码。

const [radioValue, setRadioValue] = useState('0')

  const radios = [
    { name: 'Yes', value: '1' },
    { name: 'No', value: '0' }

这是渲染部分：

            {specialQuestLoading ? (
                <Loader></Loader>
              ) : specialQuestError ? (
                <Message color="danger"> {specialQuestError} </Message>
              ) : (
                <>
                  {specialQuestions ? (
                    specialQuestions.map((question) => (
                      <Card classNames="mx-2 py-2" key={question.id}>
                        {question.question_brand === order.prod_brand ? (
                          <>
                            <Card.Title> {question.question}</Card.Title>
                            <Row>
                              {' '}
                              <Col md={4}> </Col>
                              <ButtonGroup className="mb-2">
                                {radios.map((radio, idx) => (
                                  <ToggleButton
                                    key={idx}
                                    id={`radio-${idx}`}
                                    type="radio"
                                    variant="secondary"
                                    name="radio"
                                    value={radio.value}
                                    checked={radioValue === radio.value}
                                    onChange={(e) => setRadioValue(e.currentTarget.value)}
                                  >
                                    {radio.name}
                                  </ToggleButton>
                                ))}
                              </ButtonGroup>
                              <>
                                <br />
                              </>
                            </Row>
                          </>
                        ) : (
                          <></>
                        )}
                      </Card>
                    ))
                  ) : (
                    <></>
                  )}
                </>
              )}

这就是问题所在。两者都得到检查点击一个。 任何人都知道如何解决这个问题，或者我该如何解决这个问题？

Answer 1

您为每个 specialQuestions 卡使用单一状态。因此，更改任何 ToggleButton 都会影响每个 Card 元素（specialQuestions）。

您应该将 Card 元素拆分为一个单独的组件并在那里管理 radioValue 状态。

export const Card = ({question}) => {
const [radioValue, setRadioValue] = useState('0')

const radios = [
  { name: 'Yes', value: '1' },
  { name: 'No', value: '0' }

return (
  <Card classNames = "mx-2 py-2" key = {question.id} > 
    {question.question_brand === order.prod_brand ? ( 
      <>
        <Card.Title >
          {question.question}
        </Card.Title>
        <Row>
          {' '}
          <Col md = {4}>< /Col>
          <ButtonGroup className = "mb-2" >
            {radios.map((radio, idx) => (
              <ToggleButton 
                key = {idx}
                id = {`radio-${idx}`}
                type = "radio"
                variant = "secondary"
                name = "radio"
                value = {radio.value}
                checked = {radioValue === radio.value}
                onChange = {
                  (e) => setRadioValue(e.currentTarget.value)
                } 
              >
                {radio.name} 
              </ToggleButton>
            ))
            }
          </ButtonGroup>
          <><br /></>
        </Row>
      </>)
      : ( <></>)
    } 
  </Card>
)
}

并将其消费为

specialQuestions.map((question) => (
  <Card question={question} />
)

如何修复当前单选按钮以单独单击以解决单独的问题

How to fix current radio button to be clicked seprate for seprate question

javascript

reactjs

react-bootstrap