web-dev-qa-db-ja.com

反応ブートストラップ形式の「refs」を使用して入力値を取得する方法は？

モーダルで表示されるフォームを作成しようとしています。したがって、ユーザーが値を入力すると、その値はローカルストレージに保存されます。これが、私の意味を理解するのに役立つ写真です。
enter image description here ここにフォームのコードがあります：

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の小道具に。しかし、追加した後、モーダルフォームが呼び出されるとエラーが発生します。

` enter image description here

reactjsreact-bootstrap
23
Taras Yaremkiv

この問題を作成しました。私のコード：

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

そして、次のようなハンドラーで<FormControl>から値を取得できます。

console.log(this.input.value);

詳細は私のレポジトリにあります： https://github.com/kerf007/recipebook

27
Eugene Kulakov

私はあなたと同じ問題を抱えており、これが私の解決策です

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の名前とauthorの名前の値を取得できます。

this.inputName.value and this.inputAuthor.value
8
M.Tae

この問題（または動作方法の変更のようなもの）は、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の問題 です。

4
Kaloyan Kosev

使用することが示唆されているのはrefコールバック属性なので、inputRefをrefに変更するだけです。

参考： https://facebook.github.io/react/docs/refs-and-the-dom.html

2
BryceSi

こんにちは、このソリューションは私のために働いた！

<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)
}
0
Yakup Ad

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>
           );
}
0
Steven Luong C