react: concatenate button values with input text

Question

I am trying to enter text into an input field. Some letters of the input (special latin letters) may come from button values. I created a sort of a keyboard for the special letters.

When I enter the button value into the input text, I can no longer enter any other text into the input field: it's as if it is blocked.

Here is the Button component:

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

And this is the Search component:

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

How do I make the input field receive both button values and normal letters and concatenate both to form a single input value?

so in the text field, you can either type or click on the button to add text inside, right? — Thinker
@Thinker yes. the idea is to form the input with button click + text — omar
I want to update the item (which is the final input) whenever there is text being entered. actually this is the part that I can't get right. — omar
I have tried an attempt to answer your question. Please check it — Thinker

Thinker Thinker · Accepted Answer · 2019-11-21T04:22:21

If i am right, you want to insert the text inside the input field either by typing or by the button.

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"))

Here is the working jsFiddle

Hope it helps :)

react: concatenate button values with input text

1 Answers