首页 > 解决方案 > ReactJs 屏幕重新渲染

问题描述

我有一个输入字段和一个按钮,可以以编程方式为同一字段生成文本。OnClick 以编程方式将新值分配给 this.state.assetsGooglemapslink 字段,它会显示,但在屏幕重新渲染时会立即重置为原始值。Onclick 和 OnChange 是否冲突。

我需要调整什么?

...

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 class="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 class="input-group-btn">
                                        <button className="btn btn-success" disabled={this.state.isReadOnly} 
                                        onClick={this.createGooglemapslinkHandler}
                                        style={{marginLeft: "10px"}}>Create Link</button>
                                    </div>
                                    <div class="input-group-btn">
                                        <button className="btn btn-success" disabled={this.state.isReadOnly} 
                                        onClick={()=> window.open(this.state.assetsGooglemapslink, "_blank")} 
                                        style={{marginLeft: "10px"}}>Google Map</button>
                                    </div>
                                </div>

...

标签: reactjsonclickrenderingonchange

解决方案


推荐阅读