如何通过单击REACT.js中的按钮来更改表单字段?

How to change the form fields by clicking the button in REACT.js?

我有signup.jsx

import React from "react"
import { render } from "react-dom"

import SignupContainer from "./containers/SignupContainer"

class Signup extends React.Component {
  user(){
   this.props.type='user';
  }
  hotel(){
   this.props.type='hotel';
  }
  render() {

    return (
  <div>
  Registration Type :
  <br></br>
  <button onClick={this.user}>user</button>
  <button onClick={this.hotel}>hotel</button>
  <SignupContainer type={this.props.type}/>  
     <h1>Signup</h1>
     </div>
    );
  }
}

render(<Signup type='user'/>, document.getElementById('Signup'))

我的SignupContainer.jsx

import React from "react"

import Headline from "../components/Headline"

export default class SignupContainer extends React.Component {
  render() {
  if(this.props.type=='user'){
    return (
      <div className="container">
        <div className="row">
          <div className="col-sm-12">
            <form action="/loginapp/" method="POST">
                
                
            First Name:
            <input type="text"  name="first_name">
            </input>

            <br></br>
            Last Name:
            <input type="text"  name="last_name"/>
            <br></br>
            Gender:  
            <input type="radio" name="gender" value="male" />Male
           <input type="radio" name="gender" value="female" /> Female
            <br></br>
                
            <input type="submit" value="Submit"/>
            </form>
          
          </div>
        </div>
      </div>
    );
    } else if(this.props.type=='hotel'){
        return(<h1>{this.props.type}</h1>);
    }
  }
}

我想要的是,当我点击用户按钮时,它应该显示注册表单,当我点击酒店按钮时,它应该打印酒店而无需重新加载页面。

尽量不要在组件挂载后更改自身组件的props。而是使用状态。

import React from "react"
import {render} from "react-dom"

import SignupContainer from "./containers/SignupContainer"

class Signup extends React.Component {
  constructor(props){
    super(props);
    this.state = {type : this.props.type};
  }
  
  user() {
    this.setState({type: 'user'});
  }
  hotel() {
    this.setState({type: 'hotel'});
  }
  render() {

    return ( <div >
      Registration Type:
      <br /> 
      <button onClick={this.user}>user</button >
      <button onClick = {
        this.hotel
      } > hotel </button>
     <SignupContainer type={this.state.type}/ >
      <h1> Signup </h1>
         </div>
    );
  }
}

render( < Signup type = 'user' / > , document.getElementById('Signup'))

在 React 中,props 从 parent 传递到 child,应该被认为是不可变的。另一方面,state 由组件内部使用,可以用 this.setState() 更新,这会触发 re-render。另外,当使用原生JavaScript classes时,如果你想让this引用[=26=,你需要将class方法绑定到class ].所以在你的情况下,这样的事情应该有效:

class Signup extends React.Component {
      constructor(props) {
        super(props);
        this.state = { // this is your default state
          type: 'user'
        }
      }

      user() {
        this.setState({
          type: 'user'
        })
      }

      hotel() {
        this.setState({
          type: 'hotel'
        })
      }

      render() {
        return ( < div >
          Registration Type:
          < br > < /br>
            <button onClick={this.user.bind(this)}>user</button >
            <button onClick = {this.hotel.bind(this)}>hotel</button>
            <SignupContainer type={this.state.type} />
            <h1> Signup </h1>
            </div>
        );
      }
    }

    render( < Signup type = 'user' / > , document.getElementById('Signup'))