您需要onChange手动触发事件。在文本输入上 onChange 监听input事件。

所以在你的handleClick函数中你需要触发事件

handleClick () {
    this.setState({value: 'another random text'})
    var event = new Event('input', { bubbles: true });
    this.myinput.dispatchEvent(event);
  }

完整代码

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
    value: 'random text'
    }
  }
  handleChange (e) {
    console.log('handle change called')
  }
  handleClick () {
    this.setState({value: 'another random text'})
    var event = new Event('input', { bubbles: true });
    this.myinput.dispatchEvent(event);
  }
  render () {
    return (
      <div>
        <input readOnly value={this.state.value} onChange={(e) => {this.handleChange(e)}} ref={(input)=> this.myinput = input}/>
        <button onClick={this.handleClick.bind(this)}>Change Input</button>
      </div>
    )
  }
}

ReactDOM.render(<App />,  document.getElementById('app'))

代码笔

编辑：正如@Samuel 在评论中所建议的，一种更简单的方法是调用handleChangefrom handleClickif you don't need to the event objectin handleChangelike

handleClick () {
    this.setState({value: 'another random text'})
    this.handleChange();
  }

我希望这是你需要的，它可以帮助你。

在 2020 年和 2021 年工作的解决方案：

我尝试了其他解决方案，但没有任何效果。这是因为 React.js 中的输入逻辑已更改。详情可以看这个链接：https : //hustle.bizongo.in/simulate-react-on-change-on-Controlled-components-baa336920e04。

简而言之，当我们通过改变 state 来改变 input 的值，然后调度 change 事件时，React 会同时注册 setState 和 event 并将其视为重复事件并吞下它。

解决方案是在输入上调用本机值设置器（请参阅以下代码中的 setNativeValue 函数）

示例代码

import React, { Component } from 'react'
export class CustomInput extends Component {

    inputElement = null;
    
    // THIS FUNCTION CALLS NATIVE VALUE SETTER
    setNativeValue(element, value) {
        const valueSetter = Object.getOwnPropertyDescriptor(element, 'value').set;
        const prototype = Object.getPrototypeOf(element);
        const prototypeValueSetter = Object.getOwnPropertyDescriptor(prototype, 'value').set;

        if (valueSetter && valueSetter !== prototypeValueSetter) {
            prototypeValueSetter.call(element, value);
        } else {
            valueSetter.call(element, value);
        }
    }


    constructor(props) {
        super(props);

        this.state = {
            inputValue: this.props.value,
        };
    }

    addToInput = (valueToAdd) => {
        this.setNativeValue(this.inputElement, +this.state.inputValue + +valueToAdd);
        this.inputElement.dispatchEvent(new Event('input', { bubbles: true }));
    };

    handleChange = e => {
        console.log(e);
        this.setState({ inputValue: e.target.value });
        this.props.onChange(e);
    };

    render() {
        return (
            <div>
                <button type="button" onClick={() => this.addToInput(-1)}>-</button>
                <input
                    readOnly
                    ref={input => { this.inputElement = input }}
                    name={this.props.name}
                    value={this.state.inputValue}
                    onChange={this.handleChange}></input>
                <button type="button" onClick={() => this.addToInput(+1)}>+</button>
            </div>
        )
    }
}

export default CustomInput

结果

我认为你应该像这样改变它：

<input value={this.state.value} onChange={(e) => {this.handleChange(e)}}/>

原则上与onClick={this.handleClick.bind(this)}您在按钮上所做的相同。

因此，如果您想在handleChange()单击按钮时调用，请执行以下操作：

<button onClick={this.handleChange.bind(this)}>Change Input</button>

或者

handleClick () {
  this.setState({value: 'another random text'});
  this.handleChange();
}

其他答案讨论了渲染中的直接绑定，因此我想补充几点。

不建议您直接在渲染中或组件中除构造函数之外的任何其他地方绑定函数。因为对于每个函数绑定，都会在 webpack 包 js 文件中创建一个新的函数/对象，因此包的大小会增加。您的组件将出于多种原因重新渲染，例如何时执行 setState、收到新props、何时执行this.forceUpdate()等。因此，如果您直接在渲染中绑定函数，它将始终创建一个新函数。而是始终在构造函数中进行函数绑定，并在需要时调用引用。通过这种方式，它只创建一次新函数，因为每个组件只调用一次构造函数。

你应该怎么做，如下所示

constructor(props){
  super(props);
  this.state = {
    value: 'random text'
  }
  this.handleChange = this.handleChange.bind(this);
}

handleChange (e) {
  console.log('handle change called');
  this.setState({value: e.target.value});
}

<input value={this.state.value} onChange={this.handleChange}/>

您也可以使用箭头函数，但在某些情况下，每次组件重新渲染时，箭头函数也会创建新函数。你应该知道什么时候使用箭头函数，什么时候不应该使用。有关何时使用箭头函数的详细说明，请在此处查看接受的答案

您必须执行以下 4 个步骤：

1. 创建事件

   var event = new Event("change",{
       detail: {
           oldValue:yourValueVariable,
           newValue:!yourValueVariable
       },
       bubbles: true,
       cancelable: true
   });
   event.simulated = true;
   let tracker = this.yourComponentDomRef._valueTracker;
   if (tracker) {
       tracker.setValue(!yourValueVariable);
   }
   

2. 将值绑定到组件 dom

   this.yourComponentDomRef.value = !yourValueVariable;
   

3. 绑定元素 onchange 以响应 onChange 函数

    this.yourComponentDomRef.onchange = (e)=>this.props.onChange(e);
   

4. 分派事件

   this.yourComponentDomRef.dispatchEvent(event);
   

在上面的代码中yourComponentDomRef，例如参考你的 React 组件的 master dom<div className="component-root-dom" ref={(dom)=>{this.yourComponentDomRef= dom}}>