Question

请帮助我使用此代码。输入插入后，我正在努力更新状态。我试图用onSubmit方法做到这一点，至少要在单击Button后同步输入===提交，但根据控制台日志仍然没有运气。

我应该怎么做？

import React from 'react';
import './Search.css'; 

const results = ["Balaton", "Zamardi", "Sound", "Madarsko", "Sziget", "Hungary"]

class Search extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            input: '',
            submit: ''
        };
        this.onInput = this.onInput.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }

    onInput(event) {
        this.setState({
            input: event.target.value,
            submit: this.state.input});
        console.log(this.state.input)
        console.log(this.state.submit)
    }

    onSubmit(event) {
        event.preventDefault()
        if (results.includes(this.state.input)){
            return alert("This is correct")
        } else {
            return alert("This not correct")
        }

    }
    render() {


        return(
            <div>
                <form className="search-form" onSubmit={this.onSubmit}>
                    <input type="text" value={this.state.input} placeholder="Our great memory" onChange={this.onInput}/>
                    <button type="submit">Try that!</button>
                </form>
            </div>
        )
    }
};

export default Search;

Answer 1

我重新编写了组件以提高可读性，我相信您的错误仅仅是setstate是异步的。这意味着，当您尝试同时设置输入的提交状态时，提交总是落后于输入。通过在设置输入后在onInput中添加回调，您应该准备好正确的值来提交

import React, { Component } from 'react';
const results = ["Balaton", "Zamardi", "Sound", "Madarsko", "Sziget", "Hungary"]

class Search extends Component {
        state = {
            input: '',
            submit: ''
        };
   // Added callback after input setstate
    onInput = (event) => {
        this.setState({
            input: event.target.value}, () => this.setState({submit: this.state.input));
        console.log(this.state.input)
        console.log(this.state.submit)
    }

    onSubmit = (event) => {
        event.preventDefault()
        if (results.includes(this.state.input)){
            return alert("This is correct")
        } else {
            return alert("This not correct")
        }

    }
    render() {
        return(
            <div>
                <form className="search-form" onSubmit={this.onSubmit}>
                    <input 
                    type="text" 
                    value={this.state.input} 
                    placeholder="Our great memory" 
                    onChange={this.onInput}/>
                    <button type="submit">Try that!</button>
                </form>
            </div>
        )
    }
};

export default Search;

Answer 2

onInput(event) {
        this.setState({
            input: event.target.value,
            submit: event.target.value});,() =>
        console.log(this.state.input)
        console.log(this.state.submit)
 }

这也可以让您在日志中看到正确的值。

当您将this.state.input的旧值分配给您时，您的提交状态不会更新，而应分配event.target.value。

为什么输入状态更改后提交状态不会立即更新？

2 个答案: