Блог

Я немного застрял здесь.

Я пытаюсь получить данные из одного из созданных мной компонентов React, называемого ParameterList, который содержит элемент React-Bootstrap Form.Control, позволяющий вводить числовые данные.

Я хочу иметь возможность принимать это значение и отправлять его обратно в метод в моем index.js

Я прочитал несколько потоков stackoverflow, документы и пару видеороликов на YouTube, и мне кажется, что использование ReactRefs-лучший способ сделать это, однако я не смог найти никаких ресурсов, в которых говорилось бы об его использовании при повторном использовании чего-то, что представляет собой пару компонентов глубоко в иерархии react, и большинство из них, похоже, используют другой синтаксис для своих классов, чем я. Или, может быть, это просто пролетело у меня над головой 😅

Я думаю, что у меня есть наполовину правильное понимание реактивов, но я очень теряюсь в том, как я применяю их в своих обстоятельствах.

Вот мой ParameterList.js Файл компонента

 import { Button, Row, Col, Container, Form } from "react-bootstrap"
import styles from "../styles/ParameterList.module.scss"

const ParameterList = ({onRandomList, onNewList, onClear}) => {
    
    
    return (
        <div className={styles.container} id="paramsDiv">
            <Container fluid>
                <Row>
                    <Col align="center">
                        <Form>
                            <Form.Label>Generate an entirely new list of instruments</Form.Label>
                            <Form.Control type="number" placeholder="Minimum" min="0"/>
                            <Form.Control type="number" placeholder="Maximum" min="0"/>
                            <Button type="button" onClick={onRandomList}>Generate Random List</Button>
                        </Form>
                    </Col>
                    
                    <Col align="center">
                        <Form>
                            <Form.Label>Add a random group of new instruments</Form.Label>
                            <Form.Control type="number" placeholder="Amount of Instruments" min="0"/>
                            <Button type="button" onClick={onNewList}>Generate Random Instrument(s)</Button>
                        </Form>
                    </Col>
                    <Col>
                        <Form>
                            <Form.Label>Other Parameters</Form.Label>
                            <Form.Check label="No Duplicates?" id="noDupes"/>
                            <Button type="button" variant="warning" onClick={onClear}>Clear List</Button>
                        </Form>
                    </Col>
                </Row>
            </Container>
        </div>
    )
}


export default ParameterList
 

И вот метод в моем index.js в котором я хочу это реализовать. Список параметров составляется в «return()» index.js, просто К ТВОЕМУ сведению.

 const addNewInstruments = () => {
        var insCount = ??????; //Right here is where i want to get the value of that Form.Control
    
        for (i = 0; i < insCount; i  ) {
            var newInst = allInstruments[Math.floor(Math.random() * allInstruments.length)]
            newInst.locked = false
            setMyInstruments([...myInstruments, newInst])
        } 
    }
 

Я попытался использовать ReactRefs для создания ссылки в моей форме.Управление, подобное этому, которое я получил от другого вопроса StackOverflow, однако я действительно не уверен, что делать «это.Мой ввод» в.

 <Form.Control inputRandomGroupRef={ref => {this.myInput = ref;}} type="number" placeholder="Amount of Instruments" min="0"/> 
 

После прочтения о ReactRefs это действительно кажется правильным решением, но я действительно понятия не имею, как реализовать его в моей текущей структуре, например, вытащить ссылку из этого загрузочного компонента react, который находится в моем компоненте react, который находится в моем общем index.js. Я просто не уверен, что это лучший способ, и я надеялся, что вы, ребята, поможете мне научиться и направить меня правильно.

Спасибо за любую помощь!

Что бы я сделал, это изменил addNewInstruments, чтобы принять переменную в качестве параметра const addNewInstruments = (insCount) => {

Передайте его дочернему компоненту <ParameterList addNew={addNewInstruments} ...

Затем вызовите его непосредственно из компонента или в локальной функции, имеющей доступ к входному значению.

 const ParameterList = ({onRandomList, onNewList, onClear, addNew}) => {
    
    return (
        <div className={styles.container} id="paramsDiv">
            <Container fluid>
                <Row>
                    ...
                    <Col align="center">
                        <Form>
                            <Form.Label>Numbers</Form.Label>
                            <Form.Control type="number" placeholder="Numbers" min="0" value={numberInState} onChange={(e) => setNumberInState(e.target.value)}/>
                            <Button type="button" onClick={() => addNew(numberInState)}>Generate Random Instrument(s)</Button>
                        </Form>
                    </Col>
 

Вы должны использовать useState для значений формы.

 const Form = () => {
  const [value, setValue] = useState('')

  return <input type='text' value={value} onChange={(e) => setValue(e.target.value)}/>
}
 

Шаблон здесь применим в значительной степени независимо от того, какой фреймворк или библиотеку вы используете.

Более того, если родителю в дереве нужно это значение, то вместо этого используйте это значение в родительском элементе и передайте обратный вызов «значение»и» значение «от родителя.

 const Parent = () => {
  const [value, setValue] = useState('')

  return <ChildComponent value={value} setValue={setValue}/>
}

const ChildComponent = ({value, setvalue}) => {
  return <input type='text' value={value} onChange={(e) => setValue(e.target.value)}/>
}