首页 文章

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

提问于
浏览 次
1

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

问题是当我按下按钮时，我触发一个函数，该函数应该通过setState将分配给此错误道具的状态从false更改为true，但事实并非如此 . 但是，当我在输入中输入内容时，通过触发 onChange 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>
    );
}
javascript reactjs semantic-ui-react

4 回答

  • 1

    除了马克西莫夫的答案 . 我已经在codesandbox上复制了你的问题，添加一个break语句正常工作 .

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

    link to codesandbox

    回复于
  • 1

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

    回复于
  • 0

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

    这是一个小例子：

    let changes = {...this.state.element, change};
this.SetState({data: changes});
    回复于
  • 1

    你刚忘了 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 } });
    }
};
    回复于

相关问题