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
手动触发点击。

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

Answer 2

这是如何在JSX中包含javascript语句

import React from 'react';

const person = () => {
    return <p>I have {Math.floor(Math.random()*30)} years of experience.</p>
}

export default person;

此示例显示了使用功能的React组件。

React js如何在jsx对象中注入javascript

2 个答案: