React点击按钮生成的输入框值随页面重渲染被重置该如何调整

你遇到的现象和onClick、onChange事件冲突无关，核心是以下两个常见原因：

• 按钮未指定type属性：HTML中位于<form>标签内的<button>默认类型是submit，点击后会触发表单默认提交行为，导致页面刷新，所有state重置回初始值，所以你会看到新值短暂出现后马上被还原。
• 存在其他覆盖state的逻辑：如果排除表单提交的问题，需要排查组件的生命周期函数（如componentDidUpdate、getDerivedStateFromProps）或其他事件回调中，是否存在每次渲染时都会重置assetsGooglemapslink的逻辑。

按照优先级依次调整即可：

1. 给所有按钮明确指定type="button"，禁用默认的表单提交行为
2. 可选优化：输入框处于只读状态时不需要响应onChange事件，可以按需移除或保留，该逻辑不影响本次问题
3. 排查组件内其他修改assetsGooglemapslink的代码，避免按钮赋值后被其他逻辑覆盖

createGooglemapslinkHandler= () => {
    this.setState({assetsGooglemapslink: "https://www.google.com/maps/place/" + this.state.assetsLatitude + "," + this.state.assetsLongitude});
}
changeGooglemapslinkHandler= (event) => {
    this.setState({assetsGooglemapslink: event.target.value});
}

<div className="input-group">
    <label> GoogleMaps Link: </label>
    <input 
        placeholder="assetsGooglemapslink"                                                    
        name="assetsFcclink" 
        className="form-control" 
        readOnly = {this.state.isReadOnly} 
        value={this.state.assetsGooglemapslink} 
        onChange={this.changeGooglemapslinkHandler}
        style={{marginLeft: "10px"}}
    />
    <div className="input-group-btn">
        <button 
            type="button"
            className="btn btn-success" 
            disabled={this.state.isReadOnly} 
            onClick={this.createGooglemapslinkHandler}
            style={{marginLeft: "10px"}}
        >
            Create Link
        </button>
    </div>
    <div className="input-group-btn">
        <button 
            type="button"
            className="btn btn-success" 
            disabled={this.state.isReadOnly} 
            onClick={()=> window.open(this.state.assetsGooglemapslink, "_blank")} 
            style={{marginLeft: "10px"}}
        >
            Google Map
        </button>
    </div>
</div>

内容的提问来源于stack exchange，提问作者HighwayRob