How to get values ​​from input types using this.refs in a reaction?

Question

Failed to get input type values ​​using this.refs ... how to get these values ​​from input type

   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

You should avoid ref="googleInput"how it is now considered obsolete. You should declare instead

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

Inside your handler, you can use this.googleInputto reference an element.

Then inside the function submitFormyou can get the text value withthis.googleInput._getText()

String links are deprecated https://facebook.imtqy.com/react/docs/refs-and-the-dom.html.

React , , , API, ref , "textInput", DOM this.refs.textInput. , , , , . this.refs.textInput , .

React 16.3, :

class Component extends React.Component 
{
        constructor() 
        {
            this.googleInput = React.createRef();
        }

        render() 
        {
            return 
            (
                <div ref={this.googleInput}>
                    {/* Details */}
                </div>
            );
        }
    }

Answer 2

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 3

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

Answer 4

, 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.imtqy.com/react/docs/forms.html#controlled-components.

Answer 5

2018 : - this.input = React.createRef()

: https://reactjs.org/docs/uncontrolled-components.html

Answer 6

(fooobar.com/questions/1673695/...) , , , , .

:

this.state.refs={
  fieldName1: React.createRef(),
  fieldName2: React.createRef()
};

handleSubmit :

var payload = {
  fieldName1: this.state.refs.fieldName1.current.value,
  fieldName2: this.state.refs.fieldName2.current.value,
}

Answer 7

: https://reactjs.org/docs/refs-and-the-dom.html

:

yourHandleMethod() {
  this.googleInput.click();
};

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

:

constructor(props){
  this.googleInput = React.createRef();
};
yourHandleMethod() {
  this.googleInput.current.click();
};
yourRenderCode(){
  <yourHTMLElement
    ref={this.googleInput}
  />
};

Answer 8

RN 0.57.8 this.googleInput._getText() _getText is not a function this.googleInput , _getText() _root

1. this.googleInput._root._getText()
2. this.googleInput._root._lastNativeText - , , .

Answer 9

this.referenceKey.current.value