material-ui textfield with japanese

问题描述：

请原谅我可怜的英语。material-ui textfield with japanese

'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> 
    ); 
    } 
}

答

我认为这是一个材料的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); 
    } 
}

material-ui textfield with japanese

相关推荐