如何使用 react-bootstrap 形式的“refs”获取输入值?

IT技术 reactjs react-bootstrap
2021-05-13 13:14:39

我正在尝试创建一个以模式显示的表单。因此,当用户输入一个值时,该值存储在本地存储中。这是一张可以帮助您理解我的意思的图片:
在此处输入图片说明 这是表单的代码:

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>
);  

正如我在 bootstrap React 教程中读到的那样,我应该添加
<FormControl inputRef={ref => { this.input = ref; }} /> 到 FormControl props中。但是在添加它之后,调用模态表单时出现错误:

`在此处输入图片说明

4个回答

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

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

然后你可以从<FormControl>一些处理程序中获取值,如下所示:

console.log(this.input.value);

详细信息可以在我的 repo 中找到:https : //github.com/kerf007/recipebook

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

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

还有我的表格

<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>

那么您可以通过以下方式获取 book 的 name 和 author 的 name 值:

this.inputName.value and this.inputAuthor.value

这个问题(或者更像是它工作方式的改变)与 React-Bootstrap 相关。你这样做的方式将不再有效。

<FormControl>组件直接呈现该或其他指定的组件。如果您需要访问不受控制的值<FormControl>附加裁判它,你会与不受控制的输入,然后调用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);
  }
});

一旦您获得 DOM 元素,您就可以检索该值:this.getFormControlNode().value或做任何您想做的事情。

PS:这是关于此主题相关 github 问题

这对我有用,使用https://reactjs.org/docs/refs-and-the-dom.html

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