反應js如何在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

• 分配裁判的場
• 查找對應使用findDOMNode和ref
• 觸發點擊手動DOM節點。

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