React中如何用setState修改Ref当前值？解决直接修改警告

你犯了两个关键错误：一是不该把React ref放进state里，二是直接修改了state的属性值。以下是具体修复步骤：

核心问题分析 #

React的state是用来管理组件状态、驱动UI更新的，而createRef创建的ref是专门用来直接访问DOM元素的工具，两者职责完全分开。把ref放进state后，直接修改this.state.iXWeek.current.value，既违反了「不能直接修改state」的规则，也混淆了ref的使用场景。

修复方案一：把ref移出state（推荐） #

将ref定义为组件的实例属性，而非state的一部分，之后直接操作ref指向的DOM元素即可，不会触发警告：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    // 把ref定义为实例属性，而非state成员
    this.iXWeek = React.createRef();
    // state只放需要驱动UI更新的状态变量
    this.state = {
      // 比如其他需要管理的状态：userName: '', isLoading: false...
    };
  }

  // 要修改输入框值时直接操作ref
  setWeekValueToOne() {
    // 先判断ref是否已关联到DOM元素，避免报错
    if (this.iXWeek.current) {
      this.iXWeek.current.value = 1;
    }
  }

  render() {
    // 把ref绑定到目标DOM元素上
    return <input ref={this.iXWeek} />;
  }
}

修复方案二：用state管理输入值（如果需要同步UI） #

如果这个输入框的值需要驱动其他UI更新，应该用state来管理值，通过绑定value和onChange实现双向绑定，而不是直接修改DOM：

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      xWeekValue: 0 // 用state管理输入框的值
    };
    this.iXWeek = React.createRef();
  }

  // 监听输入变化，同步更新state
  handleWeekChange = (e) => {
    this.setState({ xWeekValue: e.target.value });
  };

  // 要设置值为1时，直接更新state即可
  setWeekValueToOne() {
    this.setState({ xWeekValue: 1 });
  }

  render() {
    return (
      <input
        ref={this.iXWeek}
        value={this.state.xWeekValue}
        onChange={this.handleWeekChange}
      />
    );
  }
}

内容的提问来源于stack exchange，提问作者J-Michael