首页 文章

defaultValue没有在DOM上更新在render中渲染

提问于
浏览 次
0

我正在研究反应js，我有一个文本，用户可以输入值，所以我使用了defaultValue . 这个值也可以通过外部事件来改变 . 但是如果使用外部事件修改了值，则它不会反映在我的输入框中（直到我刷新页面） . 但我把它的值 value 输入框的字段更新了 . 但用户无法编辑它 . 我怎样才能拥有这两种功能，这意味着用户也可以更新其他事件 . 这是我的输入框

<input type="text"  defaultValue={this.props.growth}  onBlur={(e) => this.props.growth(e.target.value)}></input>

EDIT1：我添加了像vivek这样的功能，但现在文本框变得不可编辑了

constructor(props){
       super(props);
       this.state ={
           modifedProgramGrowth: this.props.growth
       }
   }
updateGrowthValue(key){
        console.log("value",key)
        this.setState({growth:key})
}

<input type="text"  value={this.state.growth} onChange={(e) => this.updateGrowthValue.bind(e.target.value)} onBlur={(e) => this.props.growth(e.target.value)}></input>
reactjs react-redux

2 回答

  • 0

    根据您编辑的问题，如果您已经使用了箭头功能，则无需使用bind为该函数提供参数 . 改成

    constructor(props){
       super(props);
       this.state ={
           modifedProgramGrowth: this.props.growth
       }
   }
updateGrowthValue(key){
        console.log("value",key)
        this.setState({growth:key})
}

<input type="text"  value={this.state.growth} onChange={(e) => this.updateGrowthValue(e.target.value)} onBlur={(e) => this.props.growth(e.target.value)}></input>
    回复于
  • 0

    从shubham的回答制作可编辑的文本框，我已将 componentWillReceiveProps(nextProps) 添加到我的代码中以解决问题

    componentWillReceiveProps(nextProps)
{
        let {growth } =this.state;
       growth = nextProps.growth ;
        this.setState({growth })
}
    回复于

相关问题