反应-改变一个不受控制的输入

我有一个简单的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

当前回答

我也有同样的问题。问题是当我保持状态信息空白

  const [name, setName] = useState()

我通过像这样添加空字符串来修复它

  const [name, setName] = useState('')

2022-02-11 09:59:41

其他回答

我在type='radio'时遇到了同样的问题

原因就是那件物品。例如，无线电并不总是真或假，而是真或未定义。确保它总是布尔值，问题就会消失。

源

2022-12-13 22:49:18

为了动态设置表单输入的状态属性并控制它们，你可以这样做:

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

2020-02-25 21:36:49

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

不正确的方法:

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

正确的方法:

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

2018-11-04 16:43:54

请试试这段代码

import React from "react";

class MyForm extends React.Component {
    constructor(props) {
        super(props);
        this.state = { name: "" };
        this.onFieldChange = this.onFieldChange.bind(this);
    }

    onFieldChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

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

export default MyForm;

2021-09-28 12:24:38

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

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

2017-07-31 15:13:30

反应-改变一个不受控制的输入

推荐文章

最新文章

标签