Question

我是React的新手，想做以下事情：我有一个带有输入元素的react组件。输入元素的值由webpack捆绑包中的JS功能控制。用户与地图互动后，输入元素的值始终会更改。我需要将此值传递给react组件状态，并为此而苦苦挣扎。你能帮忙吗？这是我的代码：

class MyReactComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            lat:"",
        };
    }

    render() {
        return (
           <input 
                type="hidden"
                id="lat"
                name="lat"
                disabled 
                onChange={e => this.setState({ lat: e.target.value})}
             />
    )

我可以在控制台中的.html代码中看到输入元素的导入值，但不会传输到状态。你能帮忙吗？

Answer 1

您可以将window.somevar用作全局变量，然后在react组件中使用它。这是最简单的方法，但我认为这不是一个好习惯。

Answer 2

几周前，我在一个项目上工作时遇到了类似的情况。在onChange事件处理程序中指定的更改仅手动发生，即在触发onChange事件时。即使该值以编程方式更改，也不会触发该事件。如果要在值更改时控制组件的状态，可以做的一件事是将新值作为prop传递给组件，并使用该prop设置状态。可以使用componentWillReceiveProps或静态getDerivedStateFromProps以及componentDidUpdate方法来完成。

从外部JS功能更改为输入值后，更新状态

2 个答案: