material-ui textfield with japanese

Question

請原諒我可憐的英語。

'TextField'的material-ui與日語輸入有問題。在'Dialog'標籤內使用時，請使用 。

第一個字母是沒有考慮的決定。例如， ，輸入'da'應該是'だ'，'pa'應該是'ぱ'。 ，但它變成'dあ'和'pあ'，因爲第一個字母是自動確定的。

當輸入第一個字母時，應暫停 直到輸入第二個字母。

有沒有人有想法？

import React, { Component } from 'react'; 
import Dialog from 'material-ui/Dialog'; 
import TextField from 'material-ui/TextField'; 

export default class MyModal extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     question: '', 
    }; 

    this.onInputChange = this.onInputChange.bind(this); 
    } 

    onInputChange(event) { 
    this.setState({ 
     question: event.target.value, 
    }); 
    } 

    render() { 
    return (
     <Dialog 
     open 
     > 
     <TextField 
      value={this.state.question} 
      onChange={this.onInputChange} 
     /> 
     </Dialog> 
    ); 
    } 
} 

Answer 1

我認爲這是一個材料的UI錯誤。我找到了兩個解決方案來解決它。

1：不要在對話框中放置TextField的值狀態。你應該寫如下：

class MyForm extends Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     question: '', 
    }; 

    this.onInputChange = this.onInputChange.bind(this); 
    } 

    onInputChange(event) { 
    this.setState({ 
     question: event.target.value, 
    }); 
    } 

    render() { 
    return (
     <TextField 
      value={this.state.question} 
      onChange={this.onInputChange} 
     /> 
    ); 
    } 
} 

export default class MyModal extends Component { 
    render() { 
    return (
     <Dialog 
     open 
     > 
     <MyForm /> 
     </Dialog> 
    ); 
    } 
} 

2;或者你可以用一些修正來擴展material-ui TextField。這種方式非常危險。但現在對我來說工作正常。 （我正在使用material-ui 0.15.4）

export default class FixedTextField extends mui.TextField { 
    handleInputChange = (event) => { 
    if (this.props.onChange) this.props.onChange(event, event.target.value); 
    } 
}