反应-更改不受控制的输入

2020/09/30 01:01 · javascript ·  · 0评论

我有一个简单的react组件,其形式相信可以控制一个输入:

import React from 'react';

export default class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {
        return (
            <form className="add-support-staff-form">
                <input name="name" type="text" value={this.state.name} onChange={this.onFieldChange('name').bind(this)}/>
            </form>
        )
    }

    onFieldChange(fieldName) {
        return function (event) {
            this.setState({[fieldName]: event.target.value});
        }
    }
}

export default MyForm;

运行我的应用程序时,出现以下警告:

警告:MyForm正在更改要控制的文本类型的不受控制的输入。输入元素不应从不受控制切换为受控制(反之亦然)。确定在组件的使用寿命期间使用受控或不受控制的输入元素

我相信我的输入是有价值的,因此受到控制。我想知道我在做什么错?

我正在使用React 15.1.0

我相信我的输入是有价值的,因此受到控制。

为了控制输入,其值必须与状态变量的值相对应。

在您的示例中,最初并未满足该条件,因为this.state.name它最初并未设置。因此,输入最初是不受控制的。一旦onChange处理程序被触发的第一次,this.state.name被设定。此时,满足上述条件,并且认为输入已受到控制。从不受控制到受控制的过渡会产生上述错误。

通过this.state.name在构造函数初始化

例如

this.state = { name: '' };

从一开始就将控制输入,解决问题。有关更多示例,请参见React Controlled Components

与此错误无关,您应该只有一个默认导出。您上面的代码有两个。

当你第一次渲染您的组件,this.state.name没有设置,所以它的计算结果undefined或者null,你最终传递value={undefined}value={null}你的input

当ReactDOM检查某个字段是否受控制时,它会检查是否value != null(请注意,它是!=,不是!==),并且由于undefined == null在JavaScript中,它确定该字段不受控制。

因此,在onFieldChange()被调用时,this.state.name将其设置为字符串值,您的输入将从不受控制变为受控制。

如果this.state = {name: ''}在构造函数中这样做,因为'' != null,您的输入将始终具有一个值,并且该消息将消失。

另一种方法是在输入中设置默认值,如下所示:

 <input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

我知道其他人已经回答了这个问题。但是,这里有一个非常重要的因素可能会帮助其他人遇到类似的问题:

您必须onChange在输入字段(例如,textField,复选框,单选框等)中添加处理程序。始终通过onChange处理程序处理活动

例:

<input ... onChange={ this.myChangeHandler} ... />

使用复选框时,可能需要使用来处理其checked状态!!

例:

<input type="checkbox" checked={!!this.state.someValue} onChange={.....} >

参考:https : //github.com/facebook/react/issues/6779#issuecomment-326314716

解决此问题的简单方法是默认设置一个空值:

<input name='myInput' value={this.state.myInput || ''} onChange={this.handleChange} />

在构造函数中将字段值设置为“”(空字符串)的一个潜在弊端是,如果该字段是可选字段并且未编辑。除非您在发布表单之前进行一些按摩,否则该字段将作为空字符串而不是NULL保留在数据存储中。

此替代方法将避免使用空字符串:

constructor(props) {
    super(props);
    this.state = {
        name: null
    }
}

... 

<input name="name" type="text" value={this.state.name || ''}/>

就我而言,我确实缺少一些琐碎的东西。

<input value={state.myObject.inputValue} />

收到警告时,我的状态如下:

state = {
   myObject: undefined
}

通过更改状态以引用我的值的输入,解决了我的问题:

state = {
   myObject: {
      inputValue: ''
   }
}

onChange={this.onFieldChange('name').bind(this)}在输入中使用时,必须将状态空字符串声明为属性字段的值。

错误方式:

this.state ={
       fields: {},
       errors: {},
       disabled : false
    }

正确方法:

this.state ={
       fields: {
         name:'',
         email: '',
         message: ''
       },
       errors: {},
       disabled : false
    }

在初始状态下将值设置为“名称”属性。

this.state={ name:''};

如果组件上的props作为状态传递,请为输入标签设置默认值

<input type="text" placeholder={object.property} value={object.property ? object.property : ""}>

为此的更新。对于React Hooks使用const [name, setName] = useState(" ")

通常,只有当您在应用程序启动时不控制文件的值,并且在某些事件或某些函数被触发或状态改变后,现在尝试控制输入字段中的值时,才会发生这种情况。

首先是无法控制输入的控制权,然后才是控制权。

避免这种情况的最佳方法是在组件的构造函数中为输入声明一些值。使输入元素从应用程序开始就具有价值。

为了动态设置表单输入的状态属性并使它们保持受控状态,您可以执行以下操作:

const inputs = [
    { name: 'email', type: 'email', placeholder: "Enter your email"},
    { name: 'password', type: 'password', placeholder: "Enter your password"},
    { name: 'passwordConfirm', type: 'password', placeholder: "Confirm your password"},
]

class Form extends Component {
  constructor(props){
    super(props)
    this.state = {} // Notice no explicit state is set in the constructor
  }

  handleChange = (e) => {
    const { name, value } = e.target;

    this.setState({
      [name]: value
    }
  }

  handleSubmit = (e) => {
    // do something
  }

  render() {
     <form onSubmit={(e) => handleSubmit(e)}>
       { inputs.length ?
         inputs.map(input => {
           const { name, placeholder, type } = input;
           const value = this.state[name] || ''; // Does it exist? If so use it, if not use an empty string

           return <input key={name}  type={type} name={name} placeholder={placeholder} value={value} onChange={this.handleChange}/>
       }) :
         null
       }
       <button type="submit" onClick={(e) => e.preventDefault }>Submit</button>
     </form>    
  }
}

如果this.state.name为null,则只需创建一个对''的后备广告。

<input name="name" type="text" value={this.state.name || ''} onChange={this.onFieldChange('name').bind(this)}/>

这也适用于useState变量。

本文地址:http://javascript.askforanswer.com/fanying-genggaibushoukongzhideshuru.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!