reactjs - 在 React 中访问输入值

Question

我正在尝试访问 React 表单中输入的值。不确定这是否是一个绑定问题。我的控制台说问题发生在 console.log(this.myInput.value.value);

import React from 'react';
import { getFunName } from '../helpers.js';

class StorePicker extends React.Component{
  constructor(){
    super();
    this.goToStore = this.goToStore.bind(this);
  }

  myInput = React.createRef();
  goToStore(event){
    //Stop refreshing the page
    event.preventDefault();
    //Get input text
    console.log(this.myInput.value.value);
    //Change url to /store/input
  }
  render(){
    return (
        <form action="" className="store-selector" onSubmit={this.goToStore}>
          <h2>Please Enter a Store</h2>
          <input type="text" ref={this.myInput} required placeholder="Store Name" defaultValue={getFunName()} />
          <button type="submit">Visit Store</button>
        </form>
    )
  }
}

export default StorePicker;

标签： reactjs

Answer 1

您应该使用对象的current属性ref来获取值。

this.myInput.current 

对象的当前持有输入的引用attribute。ref

访问 Ref 将 ref 传递给 render 中的元素时，对节点的引用将current在 ref 的属性处变得可访问。

例子：

class StorePicker extends React.Component {
  myInput = React.createRef();

  constructor() {
    super();
    this.goToStore = this.goToStore.bind(this);
  }

  goToStore(event) {
    event.preventDefault();
    console.log(this.myInput.current.value);
  }

  render() {
    return (
      <form action="" className="store-selector" onSubmit={this.goToStore}>
        <h2>Please Enter a Store</h2>
        <input type="text" ref={this.myInput} required placeholder="Store Name" />
        <button type="submit">Visit Store</button>
      </form>
    )
  }
}

ReactDOM.render(<StorePicker />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root">
      loading.....
    </div>

或者您可以使其成为受控组件并使用state.

工作示例：

class StorePicker extends React.Component {
  constructor() {
    super();
    this.goToStore = this.goToStore.bind(this);
    this.state = {
      input: ''
    }
    this.handleChange = this.handleChange.bind(this);
  }
  goToStore(event) {
    event.preventDefault();
    console.log(this.state.input);
  }

  handleChange(event) {
    let value = event.target.value;
    this.setState({
      input: value
    });
  }


  render() {
    return (
      <form action="" className="store-selector" onSubmit={this.goToStore}>
        <h2>Please Enter a Store</h2>
        <input type="text" onChange={this.handleChange} required placeholder="Store Name" />
        <button type="submit">Visit Store</button>
      </form>
    )
  }
}


ReactDOM.render(<StorePicker />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    <div id="root">
      loading.....
    </div>