我可以从 componentDidMount 调用 onChange 事件吗答案

【问题标题】：Can I call an onChange event from componentDidMount我可以从 componentDidMount 调用 onChange 事件吗
【发布时间】：2019-11-14 22:27:19
【问题描述】：

在我的 React 应用程序中，我有以下代码：

...
handleChange(event) {

    let chunkedText = []
    this.setState({value: event.target.value});
    let text = event.target.value

   ...

    //store the text in local storage with the key 'tweet'
    window.localStorage.setItem('tweet', text);

   ...

  componentDidMount() {
    //once the component loads check local storage and update the value if it exists
    if(window.localStorage.getItem('tweet')) {
      this.setState({value: window.localStorage.getItem('tweet')});
    }
  }

  render() {
    return (
      <div>
        <form>
          <label>
            <textarea
              placeholder="Begin typing your tweet here..."
              rows="14" cols="50" value={this.state.value}
              onChange={this.handleChange}
            />
          </label>
        </form>
        {this.state.length > 0 ? <span>{this.state.length} Chars || {this.state.count} Tweets</span> : ''}
      </div>
    );
  }
}

在 componentDidMount 中注意，我们正在从本地存储中提取一些文本并设置状态。理想情况下，在此之后（在 componentDidMount 中）我想运行 handleChange。这样做的正确方法是什么？

【问题讨论】：

初始化状态时可以从本地存储中提取状态，这取决于您要实现的目标
您不能只将value 传递给onChange 而不是event 对象吗？这样您就可以从componentDidMount 像this.handleChange(tweet) 和从内部render 调用它：e => this.handleChange(e.target.value)

标签： reactjs

【解决方案1】：

我会把代码改成这样：

handleChange(event) {

    this.handleValue(event.target.value);
}

handleValue(value) {

    let chunkedText = []
    this.setState({ value: value });
    let text = value

    //...

    //store the text in local storage with the key 'tweet'
    window.localStorage.setItem('tweet', text);

    //...
}

componentDidMount() {
    //once the component loads check local storage and update the value if it exists
    if (window.localStorage.getItem('tweet')) {
        this.handleValue(window.localStorage.getItem('tweet'))
    }
}

render() {
    return (
        <div>
            <form>
                <label>
                    <textarea
                        placeholder="Begin typing your tweet here..."
                        rows="14" cols="50" value={this.state.value}
                        onChange={this.handleChange}
                    />
                </label>
            </form>
            {this.state.length > 0 ? <span>{this.state.length} Chars || {this.state.count} Tweets</span> : ''}
        </div>
    );
}

【讨论】：

【解决方案2】：

很难从我们可以看到的部分代码中说出来。但是 IMO 我们正在尝试做类似的事情

const updateValue = (value) => {
    // your code to manipulate this value;
    // this code was before in `handleChange`
    // like:

    this.setState({value: event.target.value});
}


handleChange = (event) => {
    const value = event.target.value;
    updateValue(value);
}

componentDidMount() {
    //once the component loads check local storage and update the value if it exists
    if(window.localStorage.getItem('tweet')) {
        const value = window.localStorage.getItem('tweet')
        updateValue(value);
    }
  }

【讨论】：