web-dev-qa-db-fra.com

Passer des valeurs d'entrée de champ de texte réactif en tant que paramètres à une méthode

J'ai les champs de saisie ci-dessous dont j'ai besoin pour obtenir les entrées saisies et les transmettre à l'événement onClick du bouton ci-dessous.

<input type="text" style={textFieldStyle} name="topicBox" placeholder="Enter topic here..."/>
<input type="text" style = {textFieldStyle} name="payloadBox" placeholder="Enter payload here..."/>
<button value="Send" style={ buttonStyle } onClick={this.publish.bind(this,<value of input field 1>,<value of input field2>)}>Publish</button><span/>

J'ai une méthode appelée publier qui prend deux arguments de chaîne. Au lieu de ces chaînes, je dois passer les valeurs entrées dans les champs de saisie. Comment puis-je y parvenir sans stocker les valeurs dans les états? Je ne veux pas stocker les valeurs des champs d'entrée dans des variables d'état. Toute aide serait très appréciée.

javascriptbuttonreactjsinputtypescript
10
mayooran

Comment puis-je y parvenir sans stocker les valeurs dans les états?

Je pense que dans ce cas, mieux utiliser les états

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      topicBox: null,
      payloadBox: null
    };
    
    this.publish = this.publish.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }
  
  handleChange({ target }) {
    this.setState({
      [target.name]: target.value
    });
  }

  publish() {
    console.log( this.state.topicBox, this.state.payloadBox );
  }
  
  render() {
    return <div>
      <input 
        type="text" 
        name="topicBox" 
        placeholder="Enter topic here..." 
        value={ this.state.topicBox }
        onChange={ this.handleChange } 
      />
      
      <input 
        type="text" 
        name="payloadBox" 
        placeholder="Enter payload here..."
        value={ this.state.payloadBox } 
        onChange={ this.handleChange } 
      />
      
      <button value="Send" onClick={ this.publish }>Publish</button>
    </div>
  }
}

ReactDOM.render(<App />, document.getElementById('container'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>
11
Alexander T.

Vous pouvez ajouter ref pour chaque champ de texte et en lire la valeur comme:

class App extends React.Component {
  constructor() {
    super();
    this.publish = this.publish.bind(this);
  }

  publish(topicBox, payloadBox) {
    alert(this.refs.topic.value);
    alert(this.refs.payload.value);
  }

  render() {
    return <div>
      <input 
        ref="topic"
        type="text"
        name="topicBox"
        placeholder="Enter topic here..."/>

      <input 
        ref="payload"
        type="text"
        name="payloadBox"
        placeholder="Enter payload here..."/>

      <button 
        value="Send"
        onClick={this.publish}> 
        Publish
      </button>
    </div>
  }
}

ReactDOM.render(<App />, document.getElementById('container'));

Violon de travail https://jsfiddle.net/hjx3ug8a/15/

Merci pour Alexander T pour son ajout!

4
Muhammad Aref