Custom component instance code in react JS

Time:2020-1-16

React is a JavaScript library for building user interfaces.

React is mainly used to build UI. Many people think that react is the V (view) in MVC.

React originated from Facebook’s internal project to set up instagram’s website, which was opened in May 2013.

React has a high performance, the code logic is very simple, more and more people have begun to pay attention to and use it.

React characteristics

1. Declarative design – react adopts declarative paradigm, which can easily describe applications.

2. Efficient − react minimizes interaction with DOM by simulating dom.

3. Flexible − react can work well with known libraries or frameworks.

4. JSX − JSX is an extension of JavaScript syntax. React development does not necessarily use JSX, but we recommend it.

5. Components – build components through react, making the code easier to be reused, which can be well applied in the development of large projects.

6. The data flow of one-way response − react realizes the data flow of one-way response, thus reducing duplicate code, which is why it is simpler than traditional data binding.

Controllable custom components:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
  </head>
  <body>
    <script type="text/babel">
      var Radio=React.createClass({
        getInitialState:function(){
          return {
            value:this.props.defaultValue
          };
        },
        handleChange:function(event){
          if(this.props.onChange){
            this.props.onChange(event);
          }
          this.setState({
            value:event.target.value
          });
        },
        render:function(){
          var children=[];
          var value=this.props.value||this.state.value;
          React.Children.forEach(this.props.children,function(child,i){
            var label=<label key={i}>
              <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onChange={this.handleChange}/>
              {child.props.children}
              <br/>
          </label>;
          children.push(label);
          }.bind(this));
          return <span>{children}</span>;
        }
      });
      var MyForm=React.createClass({
        getInitialState:function(){
          return ({my_radio:"B"});
        },

        handleChange:function(event){
          this.setState({
            my_radio:event.target.value
          });
        },
        submitHandler:function(event){
          event.preventDefault();
          alert(this.state.my_radio);
        },
        render:function(){
          return (
            <form onSubmit={this.submitHandler}>
            <Radio value={this.state.my_radio} name="my_radio" onChange={this.handleChange}>
              <option value="A">First option</option>
              <option value="B">Second option</option>
              <option value="C">Third option</option>
            </Radio>
            <button type="submit">Speak</button>
            </form>
          )
        }
      });

      ReactDOM.render(<MyForm></MyForm>,document.body);
    </script>
  </body>
</html>

Uncontrollable custom components:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
  </head>
  <body>
    <script type="text/babel">
      var Radio=React.createClass({
        getInitialState:function(){
          return {
            value:this.props.defaultValue
          };
        },
        handleChange:function(event){
          if(this.props.onChange){
            this.props.onChange(event);
          }
          this.setState({
            value:event.target.value
          });
        },
        render:function(){
          var children=[];
          var value=this.props.value||this.state.value;
          React.Children.forEach(this.props.children,function(child,i){
            var label=<label>
              <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onChange={this.handleChange}/>
              {child.props.children}
              <br/>
          </label>;
          children['label'+i]=label;
          }.bind(this));
          return <span>{children}</span>;
        }
      });
      var MyForm=React.createClass({
        handleSubmit:function(event){
          event.preventDefault();
          alert(this.refs.radio.state.value);
        },
        render:function(){
          return (
            <form onSubmit={this.handleSubmit}>
            <Radio ref="radio" name="my_radio" defaultValue="B">
              <p value="A">First</p>
              <option value="B">Second option</option>
              <option value="C">Third option</option>
            </Radio>
            <button type="submit">Speak</button>
            </form>
          )
        }
      });

      ReactDOM.render(<MyForm></MyForm>,document.body);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
  </head>
  <body>
    <script type="text/babel">
      var Radio=React.createClass({
        getInitialState:function(){
          return {
            value:this.props.defaultValue
          };
        },
        handleChange:function(event){
          if(this.props.onChange){
            this.props.onChange(event);
          }
          this.setState({
            value:event.target.value
          });
        },
        render:function(){
          var children=[];
          var value=this.props.value||this.state.value;
          React.Children.forEach(this.props.children,function(child,i){
            var label=<label>
              <input type="radio" name={this.props.name} value={child.props.value} checked={child.props.value==value} onChange={this.handleChange}/>
              {child.props.children}
              <br/>
          </label>;
          children['label'+i]=label;
          }.bind(this));
          return <span>{children}</span>;
        }
      });
      var MyForm=React.createClass({
        handleSubmit:function(event){
          event.preventDefault();
          alert(this.refs.radio.state.value);
        },
        render:function(){
          return (
            <form onSubmit={this.handleSubmit}>
            <Radio ref="radio" name="my_radio" defaultValue="B">
              <p value="A">First</p>
              <option value="B">Second option</option>
              <option value="C">Third option</option>
            </Radio>
            <button type="submit">Speak</button>
            </form>
          )
        }
      });

      ReactDOM.render(<MyForm></MyForm>,document.body);
    </script>
  </body>
</html>

summary

The above is the custom component instance code in react JS introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time!