React:编辑后保存值

时间:2017-04-26 08:22:59

标签: reactjs

我正在使用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会返回,而不是编辑的值。

我该怎么做? 谢谢

3 个答案:

答案 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