如何通过直接传入对象使用react this.setState更新状态

Question

我只是想从处理函数附加到按钮的输入字段中获取文本，然后尝试将输入值存储到状态对象中。
但是状态对象不存储该值

class EditTextArea extends React.Component {
    constructor() {
        super();
        this.state = {
            message: "",
        };
        this.handleButton = this.handleButton.bind(this);
    }

    handleButton(e) {
        const text = e.target.previousElementSibling.value;
        this.setState({ message: text });
        console.log(this.state);
    }

    render() {
        return (
            <div>
                <form>
                    <input type="text" name="customText" />
                    <button type="button" onClick={this.handleButton}>
                        Send
                    </button>
                </form>
            </div>
        );
    }
}

ReactDOM.render(<EditTextArea />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

Answer 1

您的 render 中没有任何内容正在使用 this.state.message，因此您不会看到任何事情发生。（请注意，如果您想了解 console.log 状态，请参阅；更新是异步的。）

如果你实际使用 message，你会发现它有效：

class EditTextArea extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: "",
        };
        this.handleButton = this.handleButton.bind(this);
    }

    handleButton(e) {
        const text = e.target.previousElementSibling.value;
        this.setState({ message: text });
    }

    render() {
        return (
            <div>
                <div>
                Message is: {this.state.message}
                </div>
                <form>
                    <input type="text" name="customText" />
                    <button type="button" onClick={this.handleButton}>
                        Send
                    </button>
                </form>
            </div>
        );
    }
}

ReactDOM.render(<EditTextArea />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

另请注意，您需要在构造函数中接受一个参数并将其传递给super()；看上面。那不是问题，但它仍然不正确。

也就是说，我不会那样做。如果您想要一个不受控制的 input，请使用 ref 来访问它的值，这样您就不必进行 DOM 遍历，只需对 [=14 做一个小改动就可以很容易地破坏它=]:

class EditTextArea extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            message: "",
        };
        this.handleButton = this.handleButton.bind(this);
        this.inputRef = React.createRef(null);
    }

    handleButton() {
        const text = this.inputRef.current.value;
        this.setState({ message: text });
    }

    render() {
        return (
            <div>
                <div>
                Message is: {this.state.message}
                </div>
                <form>
                    <input type="text" name="customText" ref={this.inputRef} />
                    <button type="button" onClick={this.handleButton}>
                        Send
                    </button>
                </form>
            </div>
        );
    }
}

ReactDOM.render(<EditTextArea />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>

或者您可以考虑使用受控组件。

有关受控组件与非受控组件的更多信息hrere. More about refs here。

Answer 2

我试过你的代码，它确实有效。但问题是你不能在同一个函数中改变状态和获得改变的状态，它读取以前的状态。只需尝试点击按钮 2 次，您就会看到它有效

Answer 3

我运行你的脚本，所以最初，你的消息状态为空状态，只需添加一个文本并单击几次，这样你的消息状态就会第二次更新。因此，如果您需要对输入进行动态更改，那么我建议您正确设置一个输入处理程序并将其调用到输入更改函数中并单独处理。

 onInputchange(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

Answer 4

在反应中，状态是异步更新的。要检查您的更新状态，您可以通过登录渲染器或反应开发者工具来检查它。

根据您的代码，您可以查看下面给出的代码

class EditTextArea extends React.Component {
    constructor() {
        super();
        this.state = {
            message: "",
        };
        this.handleButton = this.handleButton.bind(this);
    }

    handleButton(e) {
        const text = e.target.previousElementSibling.value;
        this.setState({ message: text });
        console.log(this.state);//It will show you old value
    }

    render() {
    console.log("check your updated state",this.state)
        return (
            <div>
                <form>
                    <input type="text" name="customText" />
                    <button type="button" onClick={this.handleButton}>
                        Send
                    </button>
                </form>
            </div>
        );
    }
}

如何通过直接传入对象使用react this.setState更新状态

How to update the state using react this.setState by directly passing in object

javascript

setstate

reactjs