Question

试图创建一个简单的表单，我正在使用语义ui反应。问题是提交表单后，我无法在屏幕上显示任何消息。

            <Form.TextArea
                required 
                label="Description"
                name="description"
                placeholder="Your description..."
                value={this.state.description}
                error={this.state.descriptionError}
                onChange={this.inputChange}
            />
            <Form.Button 
                fluid
                color="blue"
                disabled={
                    !this.state.term 
                    || !this.state.description
                }
            >Submit</Form.Button>

    {!this.state.formError
        ?
        <Message
            success
            header="Form completed"
            content="Thank you for your contribution."
        />
        :
        <Message
            error
            header="Missing fields!" 
            list={['All fields must be filled.']}
        />
    }
        </Form>

编辑：FormError部分在这里。感谢您的答复。我会全部尝试

inputChange =  (e, {name, value}) => this.setState({[name]: value})

formSubmit = (e) => {
    e.preventDefault();
    let error = false;
    if(this.state.description.length < 10){
        this.setState({descriptionError: true})
        error=true
    }else{
        this.setState({descriptionError: false})
    }

    if(error){
        this.setState({formError: true})
        return
    }

    this.setState({formError: false})
}

Answer 1

像这样修改您的代码：

<Form success={this.state.formSuccess} error={this.state.formError}>

        <Message
            success
            header="Form completed"
            content="Thank you for your contribution."
        />
        <Message
            error
            header="Missing fields!" 
            list={['All fields must be filled.']}
        />
    <Form.TextArea 
        required 
        label="Description"
        name="description"
        placeholder="Your description..."
        value={this.state.description}
        error={this.state.descriptionError}
        onChange={this.inputChange}
    />
    <Form.Button 
        fluid
        color="blue"
        disabled={
            !this.state.term 
            || !this.state.description
        }
        onClick={this.handleSubmit}
    >Submit</Form.Button>
</Form>

然后创建一个submitHandler，如下所示：

submitHandler = () => {
// Here do your stuff on submit
if(error){
  this.setState({formError: true, formSuccess: false});
}
else{
  this.setState({formError: false, formSuccess: true});
}

}

希望这会有所帮助！

Answer 2

这是工作代码链接-https://codesandbox.io/s/semantic-ui-react-responsive-navbar-drvf7?fontsize=14

您只需将状态值更新为true或false，然后查看其工作正常的消息即可。

此外，在positive组件内，使用negative表示成功，使用<Message/>表示错误

提交表单后反应显示消息

2 个答案: