Question

我在React中制作了一个简单的Web应用程序，该应用程序运行良好，但是当我在Safari中运行该应用程序时，它会根据键入的内容更改订单位置。这是一个快速视频

基本上，我已将整个代码划分为基本元素，但没有任何更改。一旦我删除了2种方式的绑定，它便开始没有这种行为。那么这是野生动物园中的错误，还是我没有这种行为如何使用两种方式绑定？这是我用来渲染这些输入的代码

inputChangedHandler = (event, controlName) => {
    const updatedControls = {
        ...this.state.controls,
        [controlName]: {
            ...this.state.controls[controlName],
            value: event.target.value,
            valid: this.checkValidity(event.target.value, this.state.controls[controlName].validation),
            touched: true
        }
    };
    this.setState({ controls: updatedControls })
}

render() {
    const formElementArray = [];
    for (let key in this.state.controls) {
        formElementArray.push({
            id: key,
            config: this.state.controls[key]
        });
    }

    let form = formElementArray.map(formElement => (
        <Input
            key={formElement.id}
            elementType={formElement.config.elementType}
            elementConfig={formElement.config.elementConfig}
            value={formElement.config.value}
            invalid={!formElement.config.valid}
            shouldValidate={formElement.config.validation}
            touched={formElement.config.touched}
            changed={(event) => this.inputChangedHandler(event, formElement.id)}
            />
    ))
return (
        <div className={classes.Auth}>
            <form onSubmit={this.submitHandler}>
                {form}
                <Button btnType="Success">SUBMIT</Button>
            </form>
        </div>
    );

我刚刚创建了一个全新的应用程序，但只用了2个输入（使用2种方式绑定）就做出了反应，我得到的结果完全相同

带有节点的文件 with node folder

没有节点的文件 without node folder

Answer 1

这不是错误，是标准行为：Does JavaScript Guarantee Object Property Order?

如果希望顺序一致，则应将controls中的键放入一个数组中，或获取一个键数组，对它们进行排序，然后遍历render()方法中的键。 / p>

输入在Safari中更改订单的位置

1 个答案: