Question

要访问React元素或组件，＆＃39; ref＆＃39;是最好的方法吗？我们在ReactJS

中有相同的其他选择吗？

<TextField
    ref={(elem) => this.textField = elem}
    value={value}
    {...restProps}
/>

Answer 1

如果要访问实际的DOM节点，则ref是唯一的选择。通常ref用于创建不受控制的组件，我们让DOM控制输入的值，并在需要时从我们对DOM节点的引用中获取值。您无法使用value作为这些组件的支柱，但您可以使用defaultValue来设置其初始值：

class WithUncontrolledTextInput extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log(`The input value is ${this.textField.value}`);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input ref={input => this.textField = input} defaultValue='hello' />
        <input type='submit' value='Submit' />
      </form>
    );
  }
}

另一种方法是使用受控组件，其中输入的当前值存储在组件的状态中，并在更新输入值时更新。

class WithControlledTextInput extends React.Component {
  constructor() {
    super();
    this.state = {
      textField: 'hello'
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleInput = this.handleInput.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log(`The input value is ${this.state.textField}`);
  }

  handleInput(e) {
    this.setState({
      textField: e.target.value
    });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input value={this.state.textField} onChange={this.handleInput} />
        <input type='submit' value='Submit' />
      </form>
    );
  }
}

java脚本回调函数

1 个答案: