Home » Javascript » Update a text area from outside the component (updateJumbotronInput)

Update a text area from outside the component (updateJumbotronInput)

Posted by: admin August 19, 2018 Leave a comment

Questions:

I am trying to modify bellow text area to have a speech input button.

enter image description here

But I couldn’t figure out how to update the text area with recognized text.
bellow is how I tried to implement the speech button.

can anyone help me to update ‘updateJumbotronInput’ from my speech recognition function.

Speech Button:

let SpeechBtn = createReactClass({
  // inputDisplay
  componentDidMount: function() {

      // speech recognition part...

      // triger for recording
      recognition.addEventListener('result', function(event) {
        let text = 'Recognized text';
        $(this.refs.inputField).val(text);

        //in here, I want to insert this text into text area.

      }.bind(this));

      $(this.refs.button).click(function() {
        recognition.start();
      }.bind(this));
    }

  render: function() {        
    return (
      <div className="input-group-btn">
        <OverlayTrigger trigger={['hover', 'focus']} placement="bottom" overlay={popoverHoverFocus}>
          <button ref="button" className="btn btn-default" style={{borderLeft: 'none', height:"54px"}}>
            <Icon name="microphone" />
          </button>
        </OverlayTrigger>
      </div>    
    );
  }
});

my AppJumbotron component

class AppJumbotron extends Component{  
  constructor(props) {
    super(props);

    this.handleKeyPress = this.handleKeyPress.bind(this);
    this.updateInput = this.updateInput.bind(this);
  }

  updateInput(e){
    this.props.updateJumbotronInput(e.target.value);
  }

  render() {
    let { askQuestion } = this.props;

    let searchGroup = <span/>;
    let searchTextArea = (
      <textarea
        autoFocus
        value={this.props.jumbotronInput}
        className="form-control"
        ref="inputField"
        type="search"        
        onChange={this.updateInput}
        onKeyPress={this.handleKeyPress}
        style={{resize: "none"}}/>
    );
    searchGroup = (
    <div className="input-group">
    {searchTextArea}
    <SpeechBtn inputDisplay={this.changeInput}/>
    </div>
  );

    return (
      <Jumbotron style={{backgroundColor: DESIGN.JUMBOTRONBKGDCOLOR}}>
        <div ref="jumbotronImage" style={{display: "block"}}>
          {DESIGN.FRONT}
        </div>
        <br/>
        {searchGroup}
        <br/>
        onClick={this.updateInput}/>
      </Jumbotron>
    );
  }
}
Answers: