material-ui 带日语的文本字段

Question

请原谅我糟糕的英语。

'TextField' of 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

我认为这是一个 material-ui 错误。我找到了 2 个解决方案来解决它。

1：不要把TextField的值状态放在Dialog中。你应该像下面这样写：

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 带日语的文本字段

material-ui textfield with japanese

material-ui