0
180
Viewsagregar estado de uso dinámico
Veo este enlace pero no obtuve ninguna respuesta a mi pregunta
en mi componente, tengo dos cuadros de selección y un txtarea que poseía el estado especificado (definido por estado de uso).
entonces, al hacer clic en el botón Agregar, este formulario se crea una y otra vez, mi pregunta es cómo definir un nuevo estado dinámicamente para configurarlo para el nuevo cuadro de selección que se creó dinámicamente. mi cuadro de selección usa reaccionar-seleccionar y el código de ellos está aquí:
<div className="mqContainer"> {[...Array(mqCount)].map((x, i) => ( <div key={i} className="newMqWrapper mt-4"> <Row className="mt-4"> <Col xs={3}> <span>milestone</span> </Col> <Col xs={6}> <Select style={{ width: "100px !important" }} defaultValue={mileStoneType} onChange={setmileStoneType} options={MileStoneTypeOption} isMulti={true} />{" "} </Col> </Row> <Row className="mt-4"> <Col xs={3}> <span>question text</span> </Col> <Col xs={8}> <Form.Group> <Form.Control placeholder="why so serious?" className=" dirrtl" as="textarea" rows={3} /> </Form.Group>{" "} </Col> </Row> <Row className="mt-4"> <Col xs={3}> <span>answer type</span> </Col> <Col xs={6} className="mb-4"> <Select defaultValue={mileStoneAnswerType} onChange={setmileStoneAnswerType} options={MqAnswerTypeOption} />{" "} </Col> </Row> </div> ))} <Row> <Col xs={12} className=" mb-4 mt-4"> <Button onClick={() => setMqCount(mqCount + 1)} style={{ width: "100%" }} variant="outline-secondary" > + </Button>{" "} </Col> </Row> </div> 
·
Juan Pablo Isaza
1 answers
Answer question0
Espero haber entendido bien tu problema.
Regularmente, crearía un Componente en el que puede llamar a useState() por separado. Después de eso, puede representarlo dentro de su mapa ().
Intenté reproducir tu estructura:
import { useState } from 'react' const Form = () => { const [ mqCount, setMqCount ] = useState(0) return ( <div className='mqContainer'> {[ ...Array(mqCount) ].map((x, i) => { // TODO: pass your required props here return <Item key={i} /> })} <Row> <Col className='mb-4 mt-4' xs={12}> <Button style={{ width: '100%' }} variant='outline-secondary' onClick={() => setMqCount(mqCount + 1)} > + </Button>{' '} </Col> </Row> </div> ) } const Item = ({ mileStoneType, MileStoneTypeOption, setmileStoneType }) => { const [ yourState, setYourState ] = useState('Whatever you want') // TODO: replace it with your own state return ( <div key={i} className='newMqWrapper mt-4'> <Row className='mt-4'> <Col xs={3}> <span>milestone</span> </Col> <Col xs={6}> <Select isMulti defaultValue={mileStoneType} options={MileStoneTypeOption} style={{ width: '100px !important' }} onChange={setmileStoneType} />{' '} </Col> </Row> <Row className='mt-4'> <Col xs={3}> <span>question text</span> </Col> <Col xs={8}> <Form.Group> <Form.Control as='textarea' className=' dirrtl' placeholder='why so serious?' rows={3} /> </Form.Group>{' '} </Col> </Row> <Row className='mt-4'> <Col xs={3}> <span>answer type</span> </Col> <Col className='mb-4' xs={6}> <Select defaultValue={mileStoneAnswerType} options={MqAnswerTypeOption} onChange={setmileStoneAnswerType} />{' '} </Col> </Row> </div> ) }
·
Juan Pablo Isaza
Report
Answer question