相关疑难解决方法(0)

组件正在更改要控制的类型文本的不受控制的输入.输入元素不应从不受控制切换到受控制(或反之亦然).决定在组件的使用寿命期间使用受控或不受控制的输入元素.

我的代码:

constructor(props) {
  super(props);
  this.state = {
    fields: {},
    errors: {}
  }
  this.onSubmit = this.onSubmit.bind(this);
}

....

onChange(field, e){
  let fields = this.state.fields;
  fields[field] = e.target.value;
  this.setState({fields});
}

....

render() {
  return(
    <div className="form-group">
      <input
        value={this.state.fields["name"]}
        onChange={this.onChange.bind(this, "name")}
        className="form-control"
        type="text"
        refs="name"
        placeholder="Name *"
      />
      <span style={{color: "red"}}>{this.state.errors["name"]}</span>
    </div>
  )
}

考虑这个例子:

var Field = React.createClass({
    render: function () {
        // never renders new value...
        return (
            <div>
                <input type="text" defaultValue={this.props.value || ''} />
            </div>
        );
    }
});

var App = React.createClass({
    getInitialState: function () {
        return {value: 'Hello!'};
    },

    changeTo: function (str) {
        this.setState({value: str});
    },

    render: function () {
        return (
            <div>
                <Field value={this.state.value} />
                <button onClick={this.changeTo.bind(null, 'Whyyyy?')}>Change to "Whyyyy?"</button>
                <button onClick={this.changeTo.bind(null, void 0)}>Change to undefined</button>
            </div>
        );
    }
});

React.render(
    <App />,
    document.getElementById('app')
);

我想将值传递给defaultValue哑输入组件的支柱.然而,它永远不会重新呈现它.

在下面的组件中,输入字段在输入字符后失去焦点.在使用Chrome的Inspector时,看起来整个表单正在重新呈现,而不是在输入时仅输入字段的value属性.

我从eslint和Chrome Inspector都没有错误.

提交表单本身的工作方式与实际输入字段的工作方式相同,当它位于渲染的返回中或作为单独的组件导入时,而不是如何在下面编码.

为什么会这样？

主页组件

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionPost from '../redux/action/actionPost';
import InputText from './form/InputText';
import InputSubmit from './form/InputSubmit';

class _PostSingle extends Component {
    constructor(props, context) {
        super(props, context);
        this.state = {
            post: {
                title: '',
            },
        };
        this.onChange = this.onChange.bind(this);
        this.onSubmit = this.onSubmit.bind(this);
    }
    onChange(event) {
        this.setState({
            post: {
                title: event.target.value,
            },
        });
    }
    onSubmit(event) {
        event.preventDefault();
        this.props.actions.postCreate(this.state.post); …

在 React 的主页上，有最后一个示例（使用外部插件的组件），带有textarea：

    <textarea
      id="markdown-content"
      onChange={this.handleChange}
      defaultValue={this.state.value}
    />

当我输入时，textarea会更新。

现在，我试图改变defaultValue有value：

    <textarea
      id="markdown-content"
      onChange={this.handleChange}
      value={this.state.value}
    />

结果是相同的（与 一样defaultValue，即当我输入时，textarea更新后的文本会在视觉上得到更新）。

那么，两者之间的真正区别是什么？

由另一个控制器控制的用户窗体在控制台上抱怨为

“警告：组件正在将不受控的输入更改为受控。这可能是由于值从未定义的值更改为已定义的值引起的，这种情况不应该发生。在组件的生命周期内决定使用受控或不受控的输入元素。更多信息： https: //reactjs.org/link/control-components 输入跨度 li ul..."**

这是组件代码：

export default({user}) => {
  if(!user) {
    return <div></div>
  } else {
    const [name,setName] = useState(user.name|| "")
    useEffect(() => {
      setName(user.name);
    }, [user])
              
    return <form>
             <fieldset> 
               <legend> Edit  {user.name }</legend>
               <p> 
                 <label htmlFor={"name"}> Name  </label>
                 <input  id="name" value={name || ""} onChange={e => setName(e.target.value)} />
               </p> 
             </fieldset>
           </form>
  }
}

我尝试了其他 stackoverflow 答案中建议的所有修复，但仍然发出警告。
我可能缺少什么吗？

所以我在一个组件中更新我的状态,然后将新的props传递给子,但是孩子没有正确更新,输入的defaultValue没有改变.起初我以为可能是因为我正在使用this.props开始使用this.states并首先在那里应用新的道具但似乎没有工作.

父组件

this.state.newDetails == null ? '' : 
    <NewDetailsView details={this.state.newDetails} /> 

子组件:

import React, { Component } from 'react';

class NewDetailsView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      details: (this.props.details!= null) ? this.props.details: null
    }
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ details: nextProps });
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <input type="text" defaultValue={this.state.details.id} />
      </div>
    );
  }
}

export default NewDetailsView ;

解决方案代码

待...