EditableText [blueprintJS] How do you access the new text value? REACT

Question

I am developing with REACT

I would like to use BlueprintJS EditableText to update the text of some labels.

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

How would I use the updated text in a function/request when onConfirm is triggered?

Lets say I have an component similar to this, where the constructor gives some text to the state.

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

and in the render method, I render

< EditableText

value=this.state.text

onConfirm={someFunction(xxx)} />

where the 'xxx' is the new text value of the EditableText field?

Also, how would I override the inherited styles when isEditing is true?

When the component's div becomes editable it will have additional 'pt-editable-editing' class. So you may want to override that class. — Mikhail Chibel, Jan 10 '18 at 00:07

score 1 · Answer 1 · answered Jan 10 '18 at 00:03

You will need to define a function and pass that function as props to the component.

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

pro-top: no need to call `.bind` on a fat-arrow function -- they're already bound by definition. — Gilad Gray, Mar 21 '18 at 00:30

EditableText [blueprintJS] How do you access the new text value? REACT

1 Answers1