react.js - react给input异步设置初始value的办法?

问题描述

问 题

开发一个修改信息的页面，初始时会有input，值为ajax从后端拿，然后设置进input中，过程是异步，所以defaultValue办法行不通，如果设置

value={this.state.name} onChange={this.Name.bind(this)}

会报错：

Warning: FormControl is changing a controlled input of type text to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component.

请问有什么其他方案么？

————————————更新——————————————

使用value={this.state.name}会使input无法输入，也就是不可以做修改，所以下了onChange方法

Name(e){
    let value=e.target.value;
    this.setState({
      name: value
    });
  }

解决方案

应该是你的 state.name 没有定义，可以给它赋值空字符串。

我这样写没啥问题呀。

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: ""
    }
    // this.changeName = this.changeName.bind(this)
  }
  componentDidMount() {
    setTimeout(() => this.setState({name: 123}), 1000)
  }
  changeName(e){
    this.setState({
      name:e.target.value
    })
  }
  render() {
    return (
      <div className="App">
        <input type="text" value={this.state.name} onChange={this.changeName.bind(this)}/>
      </div>
    );
  }
}
export default App;

这篇关于react.js - react给input异步设置初始value的办法?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！