Question

请原谅我可怜的英语。

material-ui的'TextField'在日语输入方面存在问题。在“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

我认为这是一个重要的错误。我找到了两种解决方案来解决它。

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。这种方式非常危险。但它现在对我来说很好。（我正在使用材料-ui 0.15.4）

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

材料-ui文本字段与日语

1 个答案: