Reactjs 如何使用“获取输入值”；参考文献；以自举的形式？

我试图创建一个出现在模态中的表单。因此，当用户输入一个值时，该值存储在本地存储器中。下面的图片有助于您理解我的意思：
以下是表格的代码：

function FieldGroup({id, label, help, ...props}) {
    return (
        <ReactBootstrap.FormGroup controlId={id}>
            <ReactBootstrap.ControlLabel>{label}</ReactBootstrap.ControlLabel>
            <ReactBootstrap.FormControl {...props} />
            {help && <ReactBootstrap.HelpBlock>{help}</ReactBootstrap.HelpBlock>}
        </ReactBootstrap.FormGroup>
    );
}

const formInstance = (
    <form>
        <FieldGroup
            id="formControlsText"
            type="text"
            label="Text"
            placeholder="Recipe Name"
            inputRef={ref => { this.input = ref; }}
        />
        <ReactBootstrap.FormGroup controlId="formControlsTextarea">
            <ReactBootstrap.ControlLabel>Ingredients</ReactBootstrap.ControlLabel>
            <ReactBootstrap.FormControl componentClass="textarea" placeholder="Enter Ingredients" />
        </ReactBootstrap.FormGroup>
    </form>
);  

函数字段组（{id，label，help，…props}）{
返回(
{label}
{help&&{help}
);
}
常数formInstance=(
{this.input=ref；}}
/>
成分
);  

正如我在bootstrap React教程中所读到的，我应该添加

{this.input=ref；}}/>

到FormControl道具。但是在添加它之后，当调用模态表单时，我得到一个错误：

---

`我认为它建议使用的是ref callback属性，因此只需将

inputRef

更改为

ref

仅供参考：

此问题（或更像是工作方式的变化）与React引导相关。你这样做已经行不通了

组件直接渲染或其他指定组件。如果需要访问非受控

的值，请像使用非受控输入一样将ref附加到该值，然后调用

ReactDOM.findDOMNode（ref）

以获取DOM节点。然后，您可以与该节点交互，就像与任何其他非受控输入交互一样

下面是一个例子：

var React = require('react');
var ReactDOM = require('react-dom');
var FormControl = require('react-bootstrap').FormControl;

React.createClass({
  render: function() {
    return (<FormControl ref="formControl" />);
  },
  getFormControlNode: function() {
    // Get the underlying <input> DOM element
    return ReactDOM.findDOMNode(this.refs.formControl);
  }
});

var React=require（'React'）；
var ReactDOM=require（'react-dom'）；
var FormControl=require（'react-bootstrap'）。FormControl；
React.createClass({
render:function（）{
返回（）；
},
getFormControlNode:函数（）{
//获取底层DOM元素
返回ReactDOM.findDOMNode（this.refs.formControl）；
}
});

一旦获得DOM元素，就可以检索值：

this.getFormControlNode（）.value

，或者执行任何其他需要的操作

---

附：关于这个话题，这里有一个答案。

我刚刚提出了这个问题。我的代码：

<FormControl
    componentClass="input"
    placeholder="Enter recipe title"
    inputRef={(ref) => {this.input = ref}}
    defaultValue={title}/>
</FormGroup>

---

详细信息可以在我的回购协议中找到：

我和你有同样的问题，这是我的解决方案

const FieldGroup = ({id, label, help, inputRef, ...props}) =>
  <FormGroup controlId={id}>
    <ControlLabel>{label}</ControlLabel>
    <FormControl {...props} inputRef={inputRef}/>
    {help && <HelpBlock>{help}</HelpBlock>}
  </FormGroup>

---

您好，这个解决方案对我有效

<Form
  noValidate
  validated={validated}
  onSubmit={(e) => this.handleSubmit(e)}
  style={{ width: '100%' }}
>
  <Form.Group controlId="formBasicEmail">
   <Form.Label>Email address</Form.Label>
   <Form.Control type="email" placeholder="Enter email" inputRef={(ref) => { this.email = ref }} required />
   <Form.Text className="text-muted"> Well never share your email with anyone else.
   </Form.Text>
  </Form.Group>
</Form>

handleSubmit(event) {
    console.log(event.target.elements.formBasicPassword.value)
}

this.handleSubmit（e）}
样式={{width:'100%}
>
电子邮件地址
{this.email=ref}}必需/>
永远不要和别人分享你的电子邮件。
handleSubmit（事件）{
log（event.target.elements.formBasicPassword.value）
}

这对我很有效，使用

构造函数（道具）{
超级（道具）；
this.email=React.createRef（）；
}
提交（）{
var email=this.email.current.value；
控制台日志（电子邮件）；
}
render（）{
返回(
this.submit（）}>Send
);
}

我想我找到了如何从React引导

获取

ref

import React，{createRef}来自“React”
接口定义的属性{}
接口定义状态{
myRef:Object//我没有找到更精确的类型
} 
导出默认类SomeClass扩展React.Component{
状态={
myRef:React.createRef（）//就是这样！
}
常量handleClose=（）=>{
console.log（'this.state.myRef:'，this.state.myRef）；//这里我们可以从表单获取数据
调试器；//todo:删除
}
render（）{
返回(
{/*这里我们将表单的ref连接到State*/}
...
保存更改
)
}
}

它不会改变任何东西，同样的错误。我认为问题在于“你不能在功能组件上使用ref属性，因为它们没有实例。”你可以在功能性无状态组件上使用

ref

属性：如果你使用的是“标准”，而不是React Bootstrap，然后，状态中myRef的值应该如下初始化：myRef:React.createRef（）如何直接在状态变量上获取该值？@steven

<form>
    <FieldGroup
        id="bookName"
        type="text"
        label="Name"
        placeholder="Enter name..."
        inputRef = {(input) => this.inputName = input }
     />
    <FieldGroup
        id="bookAuthor"
        label="Author"
        type="text"
        placeholder="author 's name..."
        inputRef={(input) => this.inputAuthor = input}
     />
</form>

this.inputName.value and this.inputAuthor.value

<Form
  noValidate
  validated={validated}
  onSubmit={(e) => this.handleSubmit(e)}
  style={{ width: '100%' }}
>
  <Form.Group controlId="formBasicEmail">
   <Form.Label>Email address</Form.Label>
   <Form.Control type="email" placeholder="Enter email" inputRef={(ref) => { this.email = ref }} required />
   <Form.Text className="text-muted"> Well never share your email with anyone else.
   </Form.Text>
  </Form.Group>
</Form>

handleSubmit(event) {
    console.log(event.target.elements.formBasicPassword.value)
}

 constructor(props) {
        super(props);
        this.email = React.createRef();
    }

submit() {
        var email = this.email.current.value;
        console.log(email);
}
render() {
   return (
            <Form>
            <Form.Control type="email" placeholder="Your email" ref={this.email} />
            <Button variant="primary" onClick={()=>this.submit()}>Send</Button>
            </Form>
           );
}

 import React, {createRef} from 'react'  

    interface definedProps {} 
    interface definedState {
                  myRef: Object //I didn't found the more accurate type
              } 
    export default class SomeClass extends React.Component<definedProps,definedState> {
        state = {
            myRef: React.createRef<Form<any>>() //That's it!
        }

    const handleClose = () => {
        console.log('this.state.myRef: ', this.state.myRef); //Here we can take data from Form
        debugger; //todo: remove
    }

        render() {

            return (
                <div>
                     <Form ref={this.state.myRef}> { /*Here we're connecting the form's ref to State*/}
                        <Form.Group controlId='formName'>
                            <Form.Control
                                type='text'
                                placeholder='Enter Name'
                            />
                        </Form.Group>
                          ...
                        <Button
                            variant='primary'
                            onClick={handleClose}
                            >
                            Save Changes
                        </Button>
                        </Form>
                </div>
            )
        }
    }