React-JS 通过按下按钮改变组件的状态

Question

我在我的 react-JS 项目中使用 Semantic-ui，我有一些表单输入和一个提交按钮，这些表单有一个名为 error 的 prop，并且该道具的价值由 state

给出

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

更改了 prop

我指的按钮标有 Next

这是一些代码：

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

需要使用this.setState才能触发状态变化。如果您直接将数据设置为状态属性，它不会触发更新。

Answer 2

您刚刚忘记了 switch 中的 break 运算符：

setError = key => {
    const { error } = this.state;
    console.log(key);
    switch (key) {
        case "adminFirstName":
            this.setState({ error: { ...error, firstName: true } });
            break;
        default:
            this.setState({ error: { ...error } });
    }
};

Answer 3

除了马克西莫夫的回答。我已经在 codesandbox 上复制了你的问题，添加 break 语句可以正常工作。

此外，setState 是异步的，因此您在 setState 之后的 console.log() 不能保证您的新状态。我有 console.log 使用 setState 回调的结果，并且 firstName 属性设置为 true。

link to codesandbox

Answer 4

试试在setState前加一个变量，这个变量会保存你要修改的state的变化，在set state后直接加这个变量，inst到你要加的对象。

这是一个小例子：

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

React-JS 通过按下按钮改变组件的状态

React-JS change state of a component by pressing on button

javascript

reactjs

semantic-ui-react