Question

我正在尝试使用React.js和材料UI制作多步骤表单。出于验证目的，我正在使用Joi-Browser。但是我在验证时从Joi收到错误消息，指出该错误：ValidationError: "value" must be an object 我对React.js非常陌生，请在这里指导我做错了什么。这是我到目前为止尝试过的。

class ServiceRequestForm extends Component {

    state = {
        step: 1,
        service_category: [],
        user : [
            {
                full_name: '',
                address_one: '',
            }
        ],

        hasError: false
    }

     schema = Joi.object().keys({
        full_name: Joi.string().alphanum().min(3).max(100).required(),
        address_one: Joi.string().required(),

    });    
    validate = () => {
        const result = Joi.validate(this.state.user, this.schema)
        console.log(result)
    }    
    // Proceed to next step

    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    }
    // Proceed to prev step

    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step - 1
        });
    }

// handle select

    handleChange = (event)=> {
        this.setState(oldValues => ({
          ...oldValues,
          [event.target.name]: event.target.value,
        }));
      }
// handle input

     handleChangeInput = name => event => {
         this.setState({ [name]: event.target.value });
       };    

    handleSubmit = ()=>{
          this.validate();
      }


    render() {

        const { step } = this.state;
        const { service_category } = this.state;


        const { full_name, address_one } = this.state.user;

        const values = { service_category,  full_name, address_one };

        switch (step) {
            case 1:
                return (
                    <CategoryForm
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                );
            case 2:
                return (
                    <AddressForm
                        prevStep={this.prevStep}
                        handleChangeInput={this.handleChangeInput}
                        handleSubmit={this.handleSubmit}
                        values={values}

                    />
                );
            case 3:
                return (
                    <ThankYouPage

                    />
                );

        }
    }
}


export default ServiceRequestForm;

//类别表格

export default class CategoryForm extends Component {

    continue = e => {
        e.preventDefault();
        this.setState({ hasError: false });
        if (!this.props.values.service_category) {
            console.log(this.props.hasError);
            this.setState({ hasError: true });
        }
        else {
            this.props.nextStep();
        }

    }

    render() {

      const { handleChange, values, classes, nextStep, hasError } = this.props;

        return (

            <div>

                <h4>Select service you want</h4>

                <form>
                    <FormControl error={hasError}>

                        <Select
                            value={values.service_category}
                            onChange={handleChange}
                            inputProps={{
                                name: 'service_category'

                            }}

                        >
                            <MenuItem value="">
                                <em>Select Category</em>
                            </MenuItem>
                            <MenuItem value={10}>House Maid</MenuItem>
                            <MenuItem value={20}>Electricians</MenuItem>
                            <MenuItem value={30}>Plumber</MenuItem>
                        </Select>
                        <FormHelperText>Please select service category</FormHelperText>
                        {hasError && <FormHelperText>This is required!</FormHelperText>}
                    </FormControl>
                </form>


                <br />


                <Button variant="contained" color="primary" onClick={this.continue}>Next</Button>
            </div>
        )
    }
}

//地址表格

export default class AddressForm extends Component {

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }


    render() {

        const { handleChangeInput, values, classes, handleSubmit, prevStep, hasError, full_name } = this.props;


        return (
            <div>
                <h1>Address</h1>

                <TextField

                    label="Full Name"
                    //className={classes.textField}
                    value={values.full_name}
                    onChange={handleChangeInput('full_name')}
                    margin="normal"
                    variant="outlined"
                />

                <TextField

                    label="Address Line 1"
                    //className={classes.textField}
                    value={values.address_one}
                    onChange={handleChangeInput('address_one')}
                    margin="normal"
                    variant="outlined"
                />

                <Button variant="contained" color="primary" onClick={handleSubmit}>Submit</Button>
                <Button variant="contained" color="primary" onClick={prevStep}>Back</Button>
            </div>
        );
    }
}

Answer 1

模式可以只是一个对象。尝试如下使用。

{
full_name: Joi.string().alphanum().min(3).max(100).required(),
address_one: Joi.string().required(),
}

无需指定 Joi.object（）。keys（

使用Joi-Browser进行React.js表单验证无法正常工作

1 个答案: