反应：编辑后保存值

Question

我正在使用React.js和React InlineEdit。我想编辑文本，并保存文本 这个新的价值是我的代码：

//{etape.title} is not empty 
<InlineEdit 
validate={this.customValidateText} 
activeClassName="editing" 
text={etape.title} 
paramName="message" 
change={this.dataChanged} 
/> 



dataChanged(text) {  
     this.setState({   
      editStep: text.target.value 
     }) 
    } 

customValidateText(text) { 
     return (text.length > 0 && text.length < 64); 
    } 

所以我可以编辑我的文字，但是当我在文本中单击，值BU默认回来，不是编辑的值。

我该怎么做？ 谢谢

Answer 1

可能是上下文错误。 尝试下列操作之一：

change = {(text) => this.dataChanged(text)} 

或

dataChanged = text => { 
     this.setState({ 
      editStep: text.target.value 
     }) 
    } 

---

试试这个，然后：

<InlineEdit 
validate={this.customValidateText} 
activeClassName="editing" 
text={this.state.message} 
paramName="message" 
change={this.dataChanged} 
/> 

在你的构造：

constructor(props) { 
    super(props); 
    this.state = { 
     //what you had in your state 
     message: //The initial value you had in etape.title 
} 

最后：

dataChanged = (data) => { 
     this.setState({...data}) 
    } 

Answer 2

，如果你不绑定dataChanged方法constructor方法，尝试;

<InlineEdit 
    validate={this.customValidateText.bind(this)} 
    activeClassName="editing" 
    text={etape.title} 
    paramName="message" 
    change={this.dataChanged.bind(this)} /> 

正如@Victor提到的，这可能是一个上下文问题。如果你显示你的整个组件代码更好。

Answer 3

按DOC：

变函数会返回一个对象，将包含您在paramNames定义（在你的情况message）和键将包含由用户编辑的价值的关键。所以你需要这样写：

<InlineEdit 
    validate={this.customValidateText.bind(this)} 
    activeClassName="editing" 
    text={etape.title} 
    paramName="message" 
    change={(data) => this.dataChanged(data)} /> 

dataChanged(data) { 
    console.log(data) 
    this.setState({editStep: data.message}) 
} 

它应该工作。

检查所需道具的细节：https://www.npmjs.com/package/react-edit-inline#required-props