0
112
VistasCómo arreglar el botón de radio actual para que se haga clic en separado para una pregunta separada
Estoy tratando de hacer algunas preguntas para evaluar el precio del dispositivo antiguo. Desde el backend, recibo varias preguntas y tengo que dar un botón de radio a la pregunta de SÍ/NO para la selección, pero cuando hago clic en un botón de radio, también se hace clic en otros botones. Cómo arreglar esto .
Mi código.
const [radioValue, setRadioValue] = useState('0') const radios = [ { name: 'Yes', value: '1' }, { name: 'No', value: '0' }Y esta es la parte de renderizado:
{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> )) ) : ( <></> )} </> )} Y este es el problema. Ambos se comprueban haciendo clic en uno. 
Cualquier cuerpo sabe cómo solucionar esto, o ¿Cómo puedo solucionar esto?
1 Respuestas
Responde la pregunta0
Está utilizando un solo estado para cada tarjeta de specialQuestions . Por lo tanto, cambiar cualquiera de los ToggleButton afecta a todos los elementos de la Card (preguntas especiales).
Debe dividir el elemento de la Card en un componente separado y administrar el estado de radioValue allí.
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> ) }y consumirlo como
specialQuestions.map((question) => ( <Card question={question} /> )