Question

真的找不到我的代码出了什么问题。

我已经设置了一个具有地址查找功能的表单。 addresslookup与api一起使用，可在提供邮政编码和门牌号时提供街道和城市信息。

因此，街道字段和城市字段的值由api填充。

该表单将输入字段中的所有值保存为推送到MongoDB的状态。

由于某种原因，它不保存API提供的值。仅当我在给定的街道和城市字段中键入一个额外的字符时。

我用jQuery尝试了一个肮脏的解决方案，当值填充数据时，它为街道和城市增加了额外的空间。不幸的是，它实际上仅通过输入值来保存值。

反应：构造函数（道具）{ 超级（道具）;

    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);
}

componentDidMount() {
    $(document).ready(function(){
        $('form#registerForm').keyup(async function() {
        if ($('input[name="postcode"]').val().length >= 4 && $('input[name="huisnummer"]').val().length >= 1) {
            const postcode = $('input[name="postcode"]').val();
            const huisnummer = $('input[name="huisnummer"]').val();
            $.ajax({
            url: `http://localhost:5000/subscription/addressLookup?postalcode=${postcode}&housenumber=${huisnummer}&housenumberext=`,
            type: "get", //send it through get method
            success: function(response) {
                $('input[name="straatnaam"]').val(response.street);
                $('input[name="woonplaats"]').val(response.city);
                $('input[name="straatnaam"]').attr('value', response.street);
                $('input[name="woonplaats"]').attr('value', response.city);
            },
            error: function(xhr) {
                console.log(xhr)
            }
            });
        }
        });
    });
}

HTML：

输入示例：

name =“ woonplaats” value = {this.state.register_woonplaats} onChange = {this.onChangeRegisterWoonplaats} />

非常感谢！！

链接到屏幕截图：https://imgur.com/a/qdABWop

Answer 1

整个ready和keyup都不是React方法。有关如何制作表格，请参见the React documentation。

字段更新的主要问题是，这不是更新React控制的输入的方式：

success: function(response) {
    $('input[name="straatnaam"]').val(response.street);
    $('input[name="woonplaats"]').val(response.city);
    $('input[name="straatnaam"]').attr('value', response.street);
    $('input[name="woonplaats"]').attr('value', response.city);
},

您可以使用setState来设置组件状态。要使用setState，您需要引用您的组件。你要么做

var component = this;

在您的ready回调之前，然后：

success: (response) => {
    component.setState({
        register_straatnaam: response.street,
        register_woonplaats: response.city
    });
},

或several other options。

Answer 2

您必须调用setState才能更新输入字段，而不是使用jquery / JS DOM API

GlideUrl glideUrl = new GlideUrl(url, GlideUtils.glideHeaders()).build());

在React代码read this for info中使用Jquery并不是一个好主意。

Answer 3

谢谢！我在没有jQuery的情况下解决了不同的问题，但是不幸的是它还没有保存数据。

onChangeRegisterHuisnummer(e) {

    if( e.target.value[e.target.value.length - 1] > 1 ) {
    fetch(`http://localhost:5000/subscription/addressLookup?postalcode=2592an&housenumber=494&housenumberext=`)
        .then(response => response.json())
        .then((response) => {
             this.setState({
                register_straatnaam: response.street,
                register_woonplaats: response.city
            });
            console.log(response.city);
    })
}
this.props.update(e.target.name, e.target.value);

React仅在输入时保存输入值状态，而在由API数据填充时则不保存

3 个答案: