Composition type compoent

[suhaotian]

I write this BaseInput,
some code from draft-js,
problem here: when you click set another value button, the input didn't change.

And I know I shouldn't use defaultValue in BaseInput component, But if not, the compostion type doesn't work correct. And I browser document again, really don't know how to do it.

Have any idea?

BaseInput

Update:

change defaultValue to value:
You can see effect here: demo video

[aweary]

@suhaotian

You should set the value prop on the returned DOM element to props.value so its value is controlled. See http://jsbin.com/pavexeruce/1/edit?js,output

return (React.createElement(type, {
    ...props,
    /* Add the value prop here and it works as you'd expect */
    value: value,
    defaultValue: value,
    onBeforeInput: (e) => {
      textInputData = (textInputData || '') + e.data
    },

[suhaotian]

@aweary Yes!
But when type composition input like,Chinese, it didn't work.....

[suhaotian]

You can see here: demo video

[zpao]

@suhaotian Looks like you're using 15.1.0. Does this also happen with 15.0.1?

@hellendag have you heard of any issues with IME lately?

[keyz]

I think this is related to #3926, where onChange event fires while the IME (输入法) string is being constructed.

In your onChange handler:

    onChange: (e) => {
      if (!composing) {                    
        onChange(e.target.value)
      }
    },

When composing === true, the newly inputted value will be discarded since <input/> is controlled.

However, I'm not sure why you need to use onCompositionStart and onCompositionEnd here (a simple onChange might just be enough). Could you elaborate on your use case? @suhaotian

[suhaotian]

@keyanzhang type some Chinese words will fire oncomposition* event, and I don't want fire change event before oncompositionend

[suhaotian]

@zpao Also happen with 15.0.1; Some code from draft-js DraftEditorCompositionHandler.js. Not at all. Maybe we can learn it from vue text., it's work fine with composition input.
The BaseInput work without value. Demo effect here

[suhaotian]

Hey, guys. I solved this proplem !!!

Online work demo: http://output.jsbin.com/basada

Effect: https://youtu.be/K6lXWRv72ok