Question

我正在React Js中创建一个表单向导。第一步，我想基于单选输入值隐藏/显示一个表单。我想基于可见表单的输入来设置父级的状态。基本上，我想检查用户是否存在，然后采取适当的措施。如果存在，则输入他们的用户名，否则，请输入注册详细信息。这是我的代码

class Step1 extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            userExists: 'false',
            username: '',
            register: {
                full_name: '',
                phone_number: '',
                id_number: '',
                gender: ''
            },
            submitted: false,
        }

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.handleUserExistsCheck = this.handleUserExistsCheck.bind(this);
    }

    handleChange(event) {
        const { name, value } = event.target;
        this.setState({
            [name]: value
        });
    }

    handleUsernameChange(event) {
        const { name, value } = event.target;
        const { username} = this.state;

        this.setState({
            username: username
        });
    }

    handleRegisterChange(event) {
        const { register } = this.state;
        const { name, value } = event.target;

        this.setState({
            register: {
                ...register,
                [name]: value
            }
        });
    }

    handleUserExistsCheck(event) {
        this.setState({
            ...this.state,
            userExists: event.target.value
        });
    }

    handleSubmit(event) {
        event.preventDefault();

        this.setState({
            ...this.state,
            submitted: true
        });

       // TODO: Dispatch based on checkbox
    }

    _validate() {
        let { user } = this.state
        this.props.afterValid({
            // TODO submit data to wizard
        });
    }

    handleReset() {
        this.setState({
            ...this.state,
            userExists: false,
            username: '',
            full_name: '',
            phone_number: '',
            id_number: '',
            gender: '',
            submitted: false,
        });
    }

    render() {
       if (this.props.currentStep !== 1) {
         return null;
       } 

       const { userExists, username, register } = this.state;
       console.log(register)

       return(
            <div>
            <CardHeader>Does the user have an account?</CardHeader>
            <CardBody>
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <input type="radio" value="true" checked={ userExists ==="true"}
                        onChange={this.handleUserExistsCheck} name="userExists"/> Yes
                        {' '} 
                        <input type="radio" value="false"  checked={ userExists ==="false"}
                        onChange={this.handleUserExistsCheck} name="userExists"/> No
                    </div>
                    {' '}
                    <PersonalDetails register={register} 
                    username={username}
                    handleRegisterChange={this.handleRegisterChange} 
                    handleUsernameChange={this.handleUsernameChange}
                    userExists={userExists}/>
                    {' '}
                    <div className="clearfix">
                    <button type="submit" className="btn btn-primary mb-2 float-right">Next</button>
                    </div>
                </form>
            </CardBody>
            </div>
        );
   }
}

function UsernameForm(props) {
    return (
        <FormGroup>
            <label>Username</label>
            <Input type="text" name="username" value={props.username}
            onChange={props.onChange} placeholder="Username"/>
        </FormGroup>
    )
}

function RegisterForm(props) {
     return(
        <div>
        <FormGroup>
            <label>Full Name</label>
            <Input type="text" name="full_name" value={props.register.full_name}
            onChange={props.onChange} placeholder="Full Name"/>
        </FormGroup>
        <FormGroup>
            <label>Phone Number</label>
            <Input type="text" name="phone_number" value={props.register.phone_number}
            onChange={props.onChange} placeholder="Phone Number"/>
        </FormGroup>
        <FormGroup>
            <label>ID Number</label>
            <Input type="text" name="id_number" value={props.register.id_number}
            onChange={props.onChange} placeholder="ID Number"/>
        </FormGroup>
         <FormGroup>
            <label htmlFor="gender">Gender</label>
                <select value={props.register.gender} onChange={props.onChange} 
                    className="custom-select custom-select-lg mb-3" name="gender">
                    <option value="">----</option>
                    <option value="M">Male</option>
                    <option value="F">Female</option>                              
                </select>
        </FormGroup>
        </div>
    );
}

function str2bool(value) {
    if (typeof(value) === 'string') {
        if (value.toLowerCase() === 'true') return true;
        if (value.toLowerCase() === 'false') return false;
    }
    return value;
}


function PersonalDetails(props) {
    let { userExists } = props;
    userExists = str2bool(userExists);

    if (userExists == true) {
        return <UsernameForm username={props.username} onChange={props.handleUsernameChange}/>
    } else {
        return <RegisterForm register={props.register} onChange={props.handleRegisterChange}/>
    }
}

const connectedStep1 = connect(null, null)(Step1);
export { connectedStep1 as Step1 };

当前，我收到错误Uncaught TypeError: Cannot read property 'state' of undefined

Answer 1

在父组件中创建一个方法来更新状态，然后将此方法作为道具传递给子组件。当您在孩子中调用此道具时，它将更新父状态。

如何设置孩子的父母状态？

1 个答案: