jsxオブジェクトにjavascriptを挿入する方法

Question

"no file selected"を入力ファイルに表示して別のボタンに置​​き換えたくありません。

var form = React.createClass({ 
    render : function(){ 
     var fileStyle = { display : none }; 
     return (
     <form> 
      <input id="file" type="file" style={fileStyle}> 
      <button onClick={ /* how to perform click on file*/ }> click to add image</button> 
     </form> 
     ); 
    } 
}); 

ボタンをクリックして入力ファイルをクリックしたいときにクリックします。

React js内でこれを行う方法は？

Answer 1

• 手動でDOM findDOMNodeを使用してノードとref
• トリガクリックし、対応する検索フィールド
• に参照を割り当てます。

Demo。

const { Component } = React 
const { render, findDOMNode } = ReactDOM 

class App extends Component { 
    constructor(props) { 
    super(props) 
    this.trigger = this.trigger.bind(this) 
    } 

    trigger() { 
    findDOMNode(this.file).click() 
    } 

    render() { 
    return (
     <div> 
     <input type="file" ref={file => this.file = file} style={{ 
      display: 'none' 
      }} /> 
     <button type="button" onClick={this.trigger}>Click Me</button> 
     </div> 
    ) 
    } 
}