反应：将按钮值与输入文本连接起来

Question

我正在尝试在输入字段中输入文本。输入的某些字母（特殊拉丁字母）可能来自按钮值。我为特殊字母创建了一种键盘。

当我在输入文本中输入按钮值时，我无法再在输入字段中输入任何其他文本：就好像它被阻止了一样。

这里是 Button 组件：

class Button extends Component {
  constructor() {
    super();

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

  onClick() {
    this.props.handleLatinButton(this.props.letter);
  }

  render() {
    return <button onClick={this.onClick}>{this.props.letter}</button>;
  }
}

这是搜索组件：

class Search extends Component {
  state = {
    item: "",
    value: ""
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleLatinButton = letter => {
    this.setState({ value: this.state.value + letter });
  };

  componentDidMount() {
    this.nameInput.focus();
  }
  componentDidUpdate() {
    this.nameInput.focus();
  }

  render() {
    return (
      <div style={searchStyle} className="card card-body mb-4 p-4">
        <h6 className="display-6 text-center">Search for a customer</h6>
        <form>
          <div className="form-group">
            <input
              ref={input => {
                this.nameInput = input;
              }}
              type="text"
              className="form-control form-control-lg"
              style={formStyle}
              placeholder="search..."
              name="item"
              value={this.state.value}
              onChange={this.onChange}
            />

            <input
              type="button"
              style={buttonStyle}
              className="btn btn-primary"
              value="Find item"
            />
          </div>
        </form>
        <Button letter="č" handleLatinButton={this.handleLatinButton} />
        <Button letter="ḍ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ğ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ԑ" handleLatinButton={this.handleLatinButton} />
        <Button letter="γ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ṛ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ṣ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ṭ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ẓ" handleLatinButton={this.handleLatinButton} />
      </div>
    );
  }
}

如何使输入字段同时接收按钮值和普通字母并将两者连接起来形成一个输入值？

Answer 1

如果我是对的，您想通过键入或按钮在输入字段中插入文本。

class Button extends React.Component {
  constructor() {
    super();

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

  onClick() {
    this.props.handleLatinButton(this.props.letter);
  }

  render() {
    return (<button onClick={this.onClick}>{this.props.letter}</button>);
  }
}

class TodoApp extends React.Component {
state = {
    item: "",
    value: ""
  };

  onChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleLatinButton = letter => {
    this.setState({ item: this.state.item + letter });
  };

  componentDidMount() {
    this.nameInput.focus();
  }
  componentDidUpdate() {
    this.nameInput.focus();
  }

  render() {
    return (
      <div className="card card-body mb-4 p-4">
        <h6 className="display-6 text-center">Search for a customer</h6>
        <form>
          <div className="form-group">
            <input
              ref={input => {
                this.nameInput = input;
              }}
              type="text"
              className="form-control form-control-lg"
              placeholder="search..."
              name="item"
              value={this.state.item}
              onChange={this.onChange}
            />

            <input
              type="button"
              className="btn btn-primary"
              value="Find item"
            />
          </div>
        </form>
        <Button letter="č" handleLatinButton={this.handleLatinButton} />
        <Button letter="ḍ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ğ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ԑ" handleLatinButton={this.handleLatinButton} />
        <Button letter="γ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ṛ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ṣ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ṭ" handleLatinButton={this.handleLatinButton} />
        <Button letter="ẓ" handleLatinButton={this.handleLatinButton} />
      </div>
    );
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

这是工作的jsFiddle

希望对你有帮助:)