javascript - React-JS 通过按下按钮来更改组件的状态

Question

我在react-JS项目中使用Semantic-ui，并且那里有一些表单输入和一个提交按钮，这些表单有一个名为error的prop，并且该属性的值由状态给出

问题是，当我按下按钮时，我会触发一个函数，该函数应该通过 setState 将分配给该错误属性的状态从 false 更改为 true，但事实并非如此。但是，当我在输入中键入内容时，通过触发 onChange 属性来更改属性。

我所指的按钮标记为下一步

这是一些代码:

constructor(props) {
    super(props);
    this.state = {
        error: {
            firstName: false
        },
        general: {
            adminFirstName: "",
        },
    };
}
setData = () => {
    const {general} = this.state;
    const isValid = Object.keys(general)
        .filter( key => general[key].length !== 0 ).length === Object.keys(general).length;
    if (!isValid) { 
        Object.keys(general).map(key => { 
            if (general[key].length === 0) { this.setError(key); } });
    } else {
        // this.props.setGeneralData(general);
        // this.props.nextStep();
    }
    console.log(isValid);
    console.log(general);
};
setError = key => {
    const { error } = this.state;
    console.log(key);
    switch (key) {
    case "adminFirstName": {
        this.setState({ error: { ...error, firstName: true } });
    }
    default:
        this.setState({ error: { ...error } });
    }
};
render() {
    const { error, general } = this.state;
    return (
        <div className="block--part_75">
            <Form>
            {/* First name */}
                <Form.Field required error={error.firstName}>
                    <label>First name</label>
                    <Input onChange={e => {
                        e.target.value.length !== 0 
                            ? this.setState({ 
                                error: { ...error, firstName: false },
                                general: {
                                    ...general,
                                    adminFirstName: e.target.value
                                }
                            })
                            : this.setState({
                                error: { ...error, firstName: true },
                                general: {
                                    ...general,
                                    adminFirstName: e.target.value
                                }
                            });
                        }}
                    placeholder="First name"
                    type="text"
                    />
                </Form.Field>
            {/* First name */}
            </Form>
            <Button onClick={this.setData} floated="right">
                Next
            </Button>
        </div>
    );
}

Answer 1

尝试在setState之前添加一个变量，它将保留您要修改的状态的变化，并在执行set state后添加此变量，插入您要添加的对象。

这是一个小例子:

let changes = {...this.state.element, change};
this.SetState({data: changes});