Question

我制作了一个包含不同步骤的向导，该向导在最后一步将所有输入字段保存到Mongodb。

除2个由API填充的字段值外，几乎所有输入字段都将被保存。它将值放入输入中，但没有将其保存到状态（我的猜测）。

我尝试先设置setState，然后再设置this.props.update（e.target.name，e.target.value）;但这与其他输入字段不同。

constructor(props) {
    super(props);

    this.onChangeRegisterPostcode = this.onChangeRegisterPostcode.bind(this);
    this.onChangeRegisterHuisnummer = this.onChangeRegisterHuisnummer.bind(this);
    this.onChangeRegisterToevoeging = this.onChangeRegisterToevoeging.bind(this);
    this.onChangeRegisterStraatnaam = this.onChangeRegisterStraatnaam.bind(this);
    this.onChangeRegisterWoonplaats = this.onChangeRegisterWoonplaats.bind(this);

    this.state = {
        register_postcode: '',
        register_huisnummer: '',
        register_toevoeging: '',
        register_straatnaam: '',
        register_woonplaats: ''
    }

}

update = (e) => {
    this.props.update(e.target.name, e.target.value); 
}
onChangeRegisterPostcode(e) {
    this.setState({
        register_postcode: e.target.value
    })
    this.props.update(e.target.name, e.target.value);
}
onChangeRegisterHuisnummer(e){
    this.setState({
        register_huisnummer: e.target.value
    })
    this.props.update(e.target.name, e.target.value);
}
onChangeRegisterToevoeging(e) {
    this.setState({
        register_toevoeging: e.target.value
    })
    this.props.update(e.target.name, e.target.value);
}
onChangeRegisterStraatnaam(e) {
    this.setState({
        register_straatnaam: e.target.value
    })
    this.props.update(e.target.name, e.target.value)
}
onChangeRegisterWoonplaats(e) {
    this.setState({
        register_woonplaats: e.target.value
    })
    this.props.update(e.target.name, e.target.value);
}

componentWillUpdate(e) {
    fetch('https://jsonplaceholder.typicode.com/users')
    .then(response => response.json())
    .then((response) => {
        this.setState({register_straatnaam: response[1].name})
        console.log(response)
})

}

render() {
    return (
        <div>

        <Stats step={2} {...this.props} />
        <form id="registerForm">
            <div className="form-group">
                <label>Postcode: </label>
                <input type="text" className="form-control" name="postcode" value={this.state.register_postcode} onChange={this.onChangeRegisterPostcode}/>
            </div>
            <div className="form-group">
                <label>Huisnummer: </label>
                <input type="text" className="form-control" name="huisnummer" value={this.state.register_huisnummer} onChange={this.onChangeRegisterHuisnummer}/>
            </div>
            <div className="form-group">
                <label>Toevoeging: </label>
                <input type="text" className="form-control" name="toevoeging" value={this.state.register_toevoeging} onChange={this.onChangeRegisterToevoeging}/>
            </div>
            <div className="form-group">
                <label>Straatnaam: </label>
                <input type="text" className="form-control" name="straatnaam" value={this.state.register_straatnaam} onChange={this.onChangeRegisterStraatnaam}/>
            </div>
            <div className="form-group">
                <label>Woonplaats: </label>
                <input type="text" className="form-control" name="woonplaats" value={this.state.register_woonplaats} onChange={this.onChangeRegisterWoonplaats}/>
            </div>
        </form>
        <Continue step={2} {...this.props} />
    </div>
    );
}

提前谢谢！

反应形式输入JSON被填充但未保存在状态中

0 个答案: