Question

我对React并不陌生，并试图理解状态的概念。我试图像终端一样紧接有一组输入字段

页面组件看起来像这样

import React, { Component } from "react";
import NewLine from "./newLine";

export class Page extends Component {
    state = {
        numberOfLine: 0,
        lines: [{ value: "", id: 0 }]
    };

    render() {
        return (
            <div className="container">
                <div className="terminal">
                    <p className="prompt">
                        Hey there! This is a pre rendered line.
                    </p>
                    {this.state.lines.map(l => (
                        <NewLine
                            key={this.state.numberOfLine}
                            handelWhatever={this.handelWhatever}
                            line={l}
                        ></NewLine>
                    ))}
                </div>
            </div>
        );
    }



    handelWhatever = (string_value, LId) => {
        console.log(string_value, lId);
        this.setState(
            {
                lines: [
                    ...this.state.lines.filter(line => line.id !== lId),
                    { value: string_value, id: lId}
                ]
            },
            () => this.handleClick()
        );
    };

    // Adding a new line after a click 
    handleClick = event => {
        const num = this.state.numberOfLine + 1;
        this.setState({
            numberOfLine: num,
            lines: [...this.state.lines, { value: "", id: num }]
        });
    };
}

export default Page;

我的NewLine组件看起来像这样

import React, { Component } from "react";

export class NewLine extends Component {
    state = {
        id: this.props.line.id,
        value: this.props.line.value,
        displayInput: true
    };
    render() {
        return (
            <React.Fragment>
                <p className=output>
                    {this.state.displayInput && (
                        <input
                            type="text"
                            className="here"
                            value={this.state.value}
                            onChange={this.handleChange}
                            onKeyDown={this.handelEnter}
                        />
                    )}
                    {this.state.value}
                </p>
            </React.Fragment>
        );
    }

    handleChange = event => {
        this.setState({ value: event.target.value });
    };

    handelEnter = event => {
        if (event.key === "Enter") {
            this.setState({displayInput : false})
            this.props.handelWhatever(event.target.value, this.state.id);
    }
    };

}

export default NewLine;

当我在输入中输入“ something”时，它应该构成一个NewLine组件并删除上一个的输入，以便用户可以在新渲染的行上键入，这就是为什么我将bool置于New Line状态的原因，但是即使console.log("Did bool change")打印，布尔值也不会改变，而且我还给setState一个回调函数

this.setState({ displayInput: false }, () => console.log(this.state))

它将状态和displayInput更新为false，但是在反应控制台中它仍然显示displayInput为true

还是有另一种方法？

感谢您的帮助干杯

调用setState后，反应状态不会更改

0 个答案: