Reactjs修复失败的表单propType: You provided a `value` prop to a form field an `onChange` handler

如果你在学习react并从事应用工作，我们曾经得到以下错误

最初，我在学习reacts框架时遇到了以下错误。

这篇博文讲述了输入控件中Failed form propType错误的解决方案。

• Failed form propType: You provided a value prop to a form field without an onChange handler
• Failed form propType: You provided a checked prop to a form field without an onChange handler

这个错误出现在以下情况：

的输入表单声明的初始化值属性没有onchange 处理程序

与HTML表单处理一样，React也支持表单输入控件处理，有两种方法。

修复表单的propType：你为表单字段提供了一个value 的道具，一个onChange 处理程序

让我们看看这个错误是如何出现在react组件中的。

创建一个简单的react组件，输入类型=text"

import React, { Component } from 'react';

class TestComponent extends Component {
    render() {
        return (
            <div>
                <input type="text" value="Test value" ></input>
            </div>
        );
    }
}

export default TestComponent;

你会在控制台中看到这个错误

另一种方法，创建另一个带有input type=checkbox 的组件，能够重现这个问题。

                <input type="checkbox" checked="true" ></input>

你在控制台中得到以下错误

Warning: You provided a checked prop to a form field without an onChange handler. It will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

你正在使用value属性设置输入值，所以你可以使用一个占位符。

解决方案和修复方法：You provided a checked prop to a form field without an onChange handler

UI表单有它的开始，而React有一个单独的状态对象来保存表单数据。

在React中，表单处理是通过以下方法完成的

通过React处理状态

受控组件在这里，表单输入是由React组件本身使用状态对象和useState 方法来控制的。

在以下情况下，控制台会抛出这个错误 受控和非受控组件中缺少必要的属性和指令

那么，受控组件需要哪些东西呢？

Value 对于输入元素和 ，当用户输入或选择输入控件时，React组件要从状态对象中更新。checked

好的，你是如何以及向谁更新状态的？

React中的状态对象是通过setState() method 来更新的，而onChange 指令在输入键盘时被触发，所以你将在onChange 事件处理器中更新状态。

在下面的表单处理中是由React组件完成的，用户在输入表单中输入数据，onChange事件被触发，处理程序被执行，使用setState 对象获得值并更新状态。

import React, { Component } from 'react';

class TestComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            name: ""
        }

    }
    onChangeEvent = (event) => {
        const newName = event.target.value;
        this.setState({
            name: newName
        })
    }
    render() {
        const { name } = this.state;

        return (
            <div>
                <input
                    type="text"
                    placeholder="Enter Name..."
                    value={name}
                    onChange={(event) => this.onChangeEvent(event)} />
                <div>{name}</div>

            </div>
        );
    }
}

export default TestComponent;

同样，对于复选框，我们将使用onChange事件处理程序来更新与复选值绑定的状态。

用DOM处理表单

在这里，输入表单的日期是由内置的DOM本身处理的。这就是所谓的不受控制的组件

因此，当你没有指定以下属性时，会出现错误

defaultValue用于输入文本控件defaultChecked用于单选和复选框

这些属性用于在向用户显示表单时配置默认值。 那么，DOM是如何更新数据的？

在这里，DOM处理数据，refs in react ，用来从DOM检索值。

下面是完整的代码和解释

• 定义了与提交处理程序绑定的输入，该处理程序在构造函数中被绑定。
• 为输入元素添加了引用，在构造函数中初始化了React.createRef()
• 对于输入类型=text/textarea/select，输入表单被初始化为defaultValue。
• 对于复选框和单选框类型，使用defaultChecked。
• 在提交事件处理程序中，输入值是使用默认值来检索的。this.input.current.value

import React, { Component } from 'react';

class TestComponent extends Component {
    constructor(props) {
        super(props);
        this.onSubmitEvent = this.onSubmitEvent.bind(this);
        this.input = React.createRef();
    }
    onSubmitEvent = (event) => {
        event.preventDefault();
        console.log(this.input.current.value)
    }
    render() {

        return (
            <form onSubmit={this.onSubmitEvent}>
                <label>
                    Name:
              <input
                        defaultValue="Franc"
                        type="text"
                        ref={this.input} />
                </label>
                <input type="submit" value="Submit" />
            </form>
        );
    }
}

export default TestComponent;

结论

在本教程中，我们将学习如何在react中用受控和非受控组件修复表单propType错误。