Передать значение из метода класса компоненту реакции

Question

Ситуация: У меня есть класс со своими собственными методами.Этот класс создается в компоненте React.

Что мне нужно: Во время одного из методов в классе он изменяет значение ввода (this.$el), используя .val(), но я слушаю изменения этого входа в React.component через onChange.Мне нужно передать значение, которое я использую, чтобы установить значение входа (через this.$el.val(value)) в компонент React, чтобы изменить его состояние.

Что я пробовал: Я пытался связать .change() и trigger('change') с val(value), но это никак не влияет.

Итак, мне нужно иметь доступ к значению, которое я использую в .val(value) в моем компоненте React, КОГДА он установлен в методе класса.Я думал об использовании метода и вызове этого метода для componentWillUpdate, но компонент не обновляется, поскольку установка входного значения с помощью val() не вызывает изменения.

Есть идеи?

Код компонента:

// Create a ref to manage blur/focus state on the search input
this.inputRef = React.createRef()
// Setup initial state
this.state = {
  supersearchResults: [],
  value: this.props.initialValue || ''
}
this.onInputChange = this.onInputChange.bind(this)

tag('input', {
      autoComplete: 'off',
      className: blockElement('search-input'),
      onChange: this.onInputChange,
      placeholder: 'Find people, collections and pages',
      ref: this.inputRef,
      type: 'text',
      value: this.state.value
 })

Код класса: this = класс this.$el = вход

// What is happening:
// A user types in an input, suggestions display in a list, when you
// select a suggestion, it calls the below to change the input value
this.$el.val(complete)
this.$el.blur()
this.hide()

Answer 1

Вам необходимо сохранить состояние в вашем компоненте класса.рассмотрим следующее

class TextExample extends Component{
  constructor(){
    super(props);
    this.state ={
      username: null
    }
    this._handleChange = this._handleChange.bind(this);
  }

  _handleChange(e){
    const { name, value } = e.target;
    this.setState({ username: value}) // for single TextField
    // if you want to reuse this _handleChange function for all the TextFields then you need to use the below commented code which updates state of current TextField

   //this.setState({ [name]: value })  // it is similar like the JSON bracket notation 
  }

  render(){
    return(
      <div>
        <TextField
          id="username"
          label="Username"
          name="username"
          value={this.state.username}
          onChange={this._handleChange}   // it will call the _handleChange function on every keypress inside the TextField. 
        />
      </div>
    )
  }
}

Answer 2

Если я правильно понимаю, вы хотите получить доступ к значению HTML-поля.Тогда, пожалуйста, примите во внимание следующие соображения.Используйте контролируемые входные данные таким образом, чтобы

class ReactComponent extends...
    constuctor (props) {
        super();
        this.state = { fieldValue: props.fieldValue || '' };
    }

    onFieldChange = (event) => {
       this.setState('fieldValue': event.currentTarget.value)
    }

    render () {
        return (
           <div>
                <input type="text"
                    value={this.state.fieldValue}
                    onChange={this.onFieldChange}
                >
           <div>
        )
    }
}

Теперь, имея этот код, на случай, если вам потребуется использовать какой-то внешний класс для вызова некоторого кода, просто поместите его правильно в жизненный цикл.Но для ссылки на значение используйте состояние компонентов.И если вы хотите программно изменить значение, сделайте то же самое, обновив значение в состоянии.Если я что-то пропустил, дайте мне знать в комментариях.