Question

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

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

我所指的按钮标记为onChange

这是一些代码：

Next

Answer 1

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

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 2

除了马克西莫夫的答案。我已经在codeandbox上复制了您的问题，添加了break语句即可正常工作。

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

link to codesandbox

Answer 3

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

这是一个小例子：

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

Answer 4

必须使用this.setState才能触发状态更改。如果直接将数据设置为State属性，则不会触发更新。

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

4 个答案: