メソッドにパラメータとしてテキストフィールドの入力値を渡す

Question

私は以下のボタンのonClickイベントに入力された入力を取得する必要がある以下の入力フィールドを持っています。

<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/> 

2つの文字列引数をとるpublishというメソッドがあります。これらの文字列の代わりに、入力フィールドに入力された値を渡す必要があります。どのように私は状態で値を格納せずにこれを達成することができますか？私は入力フィールドの値を状態変数に格納したくない。どんな助けでも大歓迎です。

Answer 1

どのようにして状態に値を格納せずにこれを達成できますか？

私はこのケースで考えるより良い使用状態

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>

Answer 2

あなたが好きな、各テキストフィールドの参照を追加し、それから値を読み取ることができます。

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

作業中のファイルhttps://jsfiddle.net/hjx3ug8a/15/

ありがとうAlexander T彼の追加！