Question

我正在研究react 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>

Answer 1

根据您编辑的问题，如果您已经使用了箭头功能，则无需使用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>

Answer 2

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

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

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

2 个答案: