如何通過單擊REACT.js中的按鈕來更改表單域？

Question

我已經signup.jsx

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

 
import SignupContainer from "./containers/SignupContainer" 
 

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

 
    return (
 
\t \t <div> 
 
\t \t Registration Type : 
 
\t \t <br></br> 
 
\t \t <button onClick={this.user}>user</button> 
 
\t \t <button onClick={this.hotel}>hotel</button> 
 
\t \t <SignupContainer type={this.props.type}/> 
 
    \t <h1>Signup</h1> 
 
    \t </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>); 
 
    } 
 
    } 
 
}

我要的是，當我點擊用戶按鈕，然後它應該給我看登記表，當我點擊酒店按鈕，它應該打印酒店而無需重新加載頁面。

Answer 1

在反應，props從父母傳下來的孩子，並應被視爲不可變的。另一方面，內部組件使用state，並且可以用this.setState()進行更新，這會觸發重新渲染。另外，當使用原生JavaScript類時，如果您希望this引用類，則需要將類方法綁定到類。所以你的情況，這樣的事情應該工作：

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

Answer 2

組件安裝後，儘量不要改變自己組件的道具。而是使用狀態。

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> 
 
    \t <SignupContainer type={this.state.type}/ > 
 
     <h1> Signup </h1> 
 
     \t </div> 
 
    ); 
 
    } 
 
} 
 

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