材料 - 日本語テキストフィールドと日本語

Question

すみません。

'TextField'がmaterial-uiの場合、日本語入力に問題があります。 「ダイアログ」タグ内で使用する場合。

最初の文字は考慮されません。 たとえば、「da」と入力すると「だ」、「pa」は「ぱ」でなければなりません。 しかし、最初の文字が自動的に決定されるため 'da'と 'pa'になります。

最初の文字が入力されたときは、2番目の文字が入力されるまで、 を中断する必要があります。

誰もが知っていますか？

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

私はそれが物質的なバグだと思います。私はそれを回避するために2つのソリューションを見つけました。

1：Dialogに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を拡張することもできます。この方法はかなり危険です。しかし、それは今私にとってうまくいく。 （私は材料0.15.4を使用しています）

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