Как получить значения из типов ввода, используя this.refs в реакции?

Ответ 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 для доступа к ссылкам, мы рекомендуем вместо этого использовать шаблон обратного вызова.

редактировать

Начиная с React 16.3, формат для создания ссылок:

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

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

Ответ 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

Ответ 3

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

Ответ 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.github.io/react/docs/forms.html#controlled-components.

Ответ 5

В 2018 году вы должны написать в конструкторе это: в конструктор класса вы должны добавить что-то вроде этого this.input = React.createRef()

Примеры здесь: https://reactjs.org/docs/uncontrolled-components.html

Ответ 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,
}

Ответ 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}
  />
};

Ответ 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 - это вернет последнее состояние, а не текущее состояние, будьте осторожны при его использовании.

Ответ 9

this.referenceKey.current.value