EditableText [blueprintJS] 你如何访问新的文本值？反应答案

【问题标题】：EditableText [blueprintJS] How do you access the new text value? REACTEditableText [blueprintJS] 你如何访问新的文本值？反应
【发布时间】：2018-01-09 23:41:42
【问题描述】：

我正在使用 REACT 进行开发

我想使用 BlueprintJS EditableText 来更新一些标签的文本。

http://blueprintjs.com/docs/#core/components/editable-text

当 onConfirm 被触发时，我将如何在函数/请求中使用更新后的文本？

假设我有一个与此类似的组件，其中构造函数为状态提供了一些文本。

this.state = {
  text: this.props.text,
  updateText: ''
}

在渲染方法中，我渲染

值=this.state.text

onConfirm={someFunction(xxx)} />

“xxx”是 EditableText 字段的新文本值在哪里？

另外，当 isEditing 为真时，我将如何覆盖继承的样式？

【问题讨论】：

当组件的 div 变为可编辑时，它将具有额外的 'pt-editable-editing' 类。所以你可能想要覆盖那个类。

标签： reactjs components core blueprint blueprintjs

【解决方案1】：

您需要定义一个函数并将该函数作为道具传递给组件。

class YourComponent extends React.Component {

    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange = (value) => {
        // whatever you want to do for example, change the state 
        //this.setState({ value: value});
    };

    // and this is how you register the callback with the component 
    render () {
        return
            <EditableText
                value={this.state.text}
                onConfirm={this.handleChange} />
            />
    }
 }

【讨论】：

亲顶：不需要在胖箭头函数上调用.bind——它们已经被定义绑定了。