使用 React Bootstrap + Next.JS，我如何获取 React 组件中文本框的内容并将其发送回我的 Index.js

Question

我有点卡在这里。

我正在尝试从我制作的一个名为 ParameterList 的 React 组件中获取数据，它包含一个允许数字输入的 React-Bootstrap Form.Control 元素。

我希望能够获取该值并将其发送回我的 index.js

中的方法

我已经阅读了一些 Whosebug 线程、文档和几个 youtube 视频，似乎使用 ReactRefs 是最好的方法，但是，我找不到任何关于使用的资源它在 reffing 某些东西时是 react 层次结构深处的几个组件，而且它们中的大多数似乎使用与我不同的类语法。或者也许它就在我头上

我认为我对 ReactRefs 的理解还算不错，但我对如何将它们应用到我的环境中感到很迷茫。

这是我的 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 中我想要实现它的方法。参数列表正在 index.js 的“return()”中绘制，仅供参考。

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 在我的 Form.Control 中创建一个引用，这是我从另一个 Whosebug 问题中得到的，但是，我真的不确定要将“this.myInput”变成什么。

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

在阅读了 ReactRefs 之后，它看起来确实是可行的方法，但我真的不知道如何将它实现到我当前的结构中，比如，必须将 ref 从这个 react 中拉出来-bootstrap 组件在我的反应组件内，在我的整体 index.js 内。我真的不确定解决这个问题的最佳方法，我希望你们能帮助我学习并引导我正确。

感谢您的帮助！

Answer 1

我要做的是更改 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>

Answer 2

您应该对表单值使用 useState。

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

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

无论您使用什么框架或库，这里的模式都非常适用。

更重要的是，如果树中的父项需要此值，则改为在父项中使用该 useState 并从父项传递“value”和“setValue”回调。

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)}/>
}

使用 React Bootstrap + Next.JS，我如何获取 React 组件中文本框的内容并将其发送回我的 Index.js

Using React Bootstrap + Next.JS, How do i go about getting the content of a textbox within a React Component and sending it back to my Index.js

javascript

reactjs

react-bootstrap

bootstrap-4

next.js