React js how to inject javascript in jsx object

Question

I don't want to display "no file selected" on input file and replacing with another button.

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

I want when I click button then input file is perform click.

How to accomplish this within React js?

Your question is not clear.

alexunder
– alexunder

2016-09-26 11:44:02 +00:00
Commented Sep 26, 2016 at 11:44 — alexunder
– alexunder, Commented Sep 26, 2016 at 11:44

Yury Tarabanko · Accepted Answer · 2016-09-26 12:53:34Z

1

Assign a ref to a field
Find corresponding dom node using findDOMNode and the ref
Trigger click manually.

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

answered Sep 26, 2016 at 12:53

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user6184932 · Accepted Answer · 2019-07-12 06:58:02Z

0

Here is how to include javascript statements in JSX

import React from 'react';

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

export default person;

This example shows a React component using function.

answered Jul 12, 2019 at 6:58

user6184932

Collectives™ on Stack Overflow

React js how to inject javascript in jsx object

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related