如何使用reactjs中的this.refs从输入类型中获取值？

Question

无法使用this.refs获取输入类型的值...如何从输入类型获取值

   export class BusinessDetailsForm extends Component {
      submitForm(data) {
        console.log(this.refs.googleInput.value)
        }
      }
      reder() {
        return(
          <form onSubmit={this.submitForm}>
            <Field type="text"
              name="location"
              component={GoogleAutoComplete}
              id="addressSearchBoxField"
              ref="googleInput"
            />
          </form>
        )
      }
    }

Answer 1

你应该避免,ref="googleInput"因为它现在被认为是遗产.你应该申报

ref={(googleInput) => { this.googleInput = googleInput }}

在处理程序内部,您可以使用this.googleInput引用元素.

然后在submitForm函数内部,您可以获取文本值 this.googleInput._getText()

字符串引用是遗留的 https://facebook.github.io/react/docs/refs-and-the-dom.html

如果您之前使用过React,那么您可能熟悉旧的API,其中ref属性是一个字符串,如"textInput",DOM节点作为this.refs.textInput访问.我们建议不要使用它,因为字符串引用有一些问题,被认为是遗留问题,很可能会在未来的某个版本中删除.如果您当前正在使用this.refs.textInput访问引用,我们建议使用回调模式.

Answer 2

如果有人想知道如何使用 hooks 实现 ref ：

// Import
import React, { useRef } from 'react';


const Component = () => {
    // Create Refs
    const exampleInput = useRef();

    const handleSubmit = (e) => {
        e.preventDefault();
   
         const inputTest = exampleInput.current.value;

     }

    return(
        <form onSubmit={handleSubmit}>
            <label>
                Name:
                <input type="text" ref={exampleInput} />
            </label>
            <input type="submit" value="Submit" />
        </form>
}

Answer 3

使用ref={ inputRef => this.input = inputRef }现在被认为是遗产.在React 16.3及以上版本中,您可以使用以下代码,

class MyForm extends React.Component {
    constructor(props) {
        //...
        this.input = React.createRef();
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.input.current.value);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <label>
                    Name:
                    <input type="text" ref={this.input} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

编辑:感谢评论@stormwild

Answer 4

getValue: function() {
    return this.refs.googleInput.value;
  }

Answer 5

我认为，更惯用的方法是使用state而不是refs，尽管在这种情况下，由于您只有一个输入，所以代码要多一些。

export class BusinessDetailsForm extends Component {

  constructor(props) {
    super(props);
    this.state = { googleInput: '' };
    this.defaultValue = 'someValue';
    this.handleChange = this.handleChange.bind(this);
    this.submitForm = this.submitForm.bind(this);
  }

  handleChange(e) {
    const { field, value } = e.target;
    this.setState({ [field]: value });
  }
  submitForm() {
    console.log(this.state.googleInput);
  }
  render() {
    return (
      <Formsy.Form onSubmit={this.submitForm} id="form_validation">
        <Field type="text"
          name="googleInput"
          onChange={this.handleChange}
          component={GoogleAutoComplete}
          floatingLabelText="location"
          hintText="location"
          id="addressSearchBoxField"
          defaultValue={this.defaultValue}
          onSelectPlace={this.handlePlaceChanged}
          validate={[ required ]}
        />
      </Formsy.Form>
    );
  }
}

参见https://facebook.github.io/react/docs/forms.html#受控组件。