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

Chris Johnson спросил: 28 апреля 2018 в 09:21 в: javascript

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

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

Что я try: Я пробовал цепочку .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 = class 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()

2 ответа

Bogdan M. ответил: 28 апреля 2018 в 09:34

Если я правильно понимаю, вы хотите иметь доступ к значению поля 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>
        )
    }
}

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

Jeeva ответил: 28 апреля 2018 в 09:37

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

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>
    )
  }
}
Chris Johnson ответил: 28 апреля 2018 в 09:46
У меня это есть, но поскольку onChange не запускается, когда метод класса вызывает .val(), он не устанавливается. Я хочу передать значение, которое я передаю .val(), чтобы компонент использовал его.
Jeeva ответил: 28 апреля 2018 в 09:48
Вы можете показать свой класс. Что будет полезно для нас
Chris Johnson ответил: 28 апреля 2018 в 09:53
Я уточню, что смогу ...