我正在使用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);
}
所以我可以编辑我的文本,但是当我点击文本时,值budéfault会返回,而不是编辑的值。
我该怎么做? 谢谢
答案 0 :(得分:0)
可能是上下文错误。 请尝试以下方法之一:
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})
}
答案 1 :(得分:0)
如果您未在constructor
方法中绑定<InlineEdit
validate={this.customValidateText.bind(this)}
activeClassName="editing"
text={etape.title}
paramName="message"
change={this.dataChanged.bind(this)} />
方法,请尝试;
format
正如@Victor所提到的,它可能是一个上下文问题。如果您展示整个组件代码,那就更好了。
答案 2 :(得分:0)
根据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