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

希望它会有所帮助：）

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

1 个答案: