反應：編輯後保存值

我正在使用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默認回來，不是編輯的值。

我該怎麼做？謝謝

來源

2017-04-26 Anaïs Saez

你試試這個：'變化= {（文本）=> this.dataChanged（文字）}' –

是，但我有同樣的問題:( –

可能是上下文錯誤。嘗試下列操作之一：

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}) 
    }

來源

2017-04-26 08:29:08

第一個應該是'change = {（text）=> this.dataChanged（text）}'，一個正常的函數調用。 –

謝謝你的回答，但我正在嘗試你的解決方案，而且它不能工作，我有相同的結果... –

正如@alix所說，可能有助於獲得整個代碼 –

，如果你不綁定dataChanged方法constructor方法，嘗試;

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

正如@Victor提到的，這可能是一個上下文問題。如果你顯示你的整個組件代碼更好。

來源

2017-04-26 08:44:30 alix

我'已經嘗試了bind（），但它不起作用.. –

按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

來源

2017-04-26 08:55:30

不，我已經測試過，但是我也遇到同樣的問題 –

反應：編輯後保存值

回答

相關問題