Java 脚本回调函数

Question

要访问 React 元素或组件，"ref"是最好的方法？我们在 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>
    );
  }
}