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

java脚本回调函数

java script call back function

javascript

ref

reactjs

react-jsx