在 componentDidMount ReactJS 上获取选定的值

在 ReactJS 中，componentDidMount 是生命周期函数之一，它会在组件挂载到 DOM 后立即被调用。我们可以利用这个函数来获取选定的值。

步骤

以下是获取选定的值的步骤：

1. 创建一个 ref 来引用 select 元素。
2. 在 componentDidMount 函数中，使用 ref 来获取选定的值并将其存储在组件的状态中。

代码示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedValue: '' };
    this.selectRef = React.createRef(); // 创建一个ref
  }

  componentDidMount() {
    const selectedValue = this.selectRef.current.value; // 获取选定的值
    this.setState({ selectedValue }); // 将选定的值存储到组件状态中
  }

  render() {
    return (
      <div>
        <select ref={this.selectRef}>
          <option value="option1">Option 1</option>
          <option value="option2">Option 2</option>
          <option value="option3">Option 3</option>
        </select>
        <p>Selected Value: {this.state.selectedValue}</p>
      </div>
    );
  }
}

ReactDOM.render(<MyComponent />, document.getElementById('root'));

在上面的代码中，我们创建了一个 ref 并将其传递给 select 元素。在 componentDidMount 函数中，我们使用 ref 来获取选定的值。然后将选定的值存储到组件状态中，以便稍后使用。

最后在 render 函数中，我们渲染选项和选定的值。

结论

使用上述步骤，我们可以在 componentDidMount ReactJS 上获取选定的值并将其存储在组件的状态中。这将帮助我们在需要使用该值时轻松地访问它。