Question

情况：我有一个有自己方法的类。该类在React组件中实例化。

我需要的是什么：在课程的其中一个方法中，它会使用this.$el更改输入（.val()）的值，但我和＃39; m通过onChange监听React.component中此输入的更改。我需要传递我用来设置输入值（通过this.$el.val(value)）到React组件以改变其状态的值。

我尝试了什么：我已经尝试将.change()和trigger('change')链接到val(value)，但它没有尝试有任何影响。

因此，我需要能够在我的React组件中.val(value)中使用我在类方法中设置时使用的值。我考虑使用方法并在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

如果我理解正确，您希望能够访问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>
        )
    }
}

现在有了这段代码，如果你需要使用一些外部类来调用某些代码，只需在生命周期中正确放置它。但是为了引用值，使用组件状态。如果您想以编程方式想要更改值，请执行相同的更新状态中的值。如果我遗漏了某些内容，请在评论中告诉我。

Answer 2

您需要在类组件中保持状态。请考虑以下

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>
    )
  }
}

将类方法中的值传递给反应组件

2 个答案: