React中表單中的條件渲染無法正常工作

Question

我正在嘗試讓該組件根據選擇選項顯示特定形式。 我正在使用switch語句進行條件渲染。 但是目前無法正常工作，我想念什么？

class Form extends Component {
    state = {
            selectedValue: ''
        };
    handleChange(event) { 
        this.setState({selectedValue: event.target.value}); 
        }
    renderSelectedForm = (param) => {
        const formStyle = {
            display: 'none'
        }
        switch(param) {
            case 'form_name1':
            return <form name="form_name1" id="form_name1" style={formStyle}>
                    form 1
                    </form>;
            case 'form_name2':
            return <form name="form_name1" id="form_name2" style={formStyle}>
                    form 2
                    </form>;
            case 'form_name3':
            return <form name="form_name1" id="form_name3" style={formStyle}>
                    form 3
                    </form>;
            default:
            return null;
        }
    }

    render() {

        return (
             <div>
      <div className={styles.ContactUs}>
              <form >
                <select value={this.state.selectedValue} onChange={this.handleChange}>
                    <option value="form_name1">Form 1</option>
                    <option value="form_name2">Form 2</option>
                    <option value="form_name3">Form 3</option>
                </select>
             </form>
      {this.renderSelectedForm(this.state.selectedValue)}
    </div>
    </div>
        );
    }
}

export default Form;

Answer 1

您的display設置為“無”。

Answer 2

handleChange = (event) => {
    this.setState({ selectedValue: event.target.value   });
}

你要么需要做結合構造this為handleChange功能或只是聲明它上面的方式，其中自動綁定。

constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
}

Answer 3

您需要包裝() 。 像下面

switch(param) {
     case 'form_name1':
     return (<form name="form_name1" id="form_name1" style={formStyle}>
     form 1
     </form>);                        
     ...
}

Answer 4

在您的狀態下為要顯示的第一個表單設置默認值，例如form_name1 。 或在您的選擇元素中添加“選擇表單”之類的選項。

如果要進行條件渲染，則實際上不需要設置display: none在元素中display: none 。 每個元素將根據您當前的狀態進行渲染，並且為卸載組件而返回null 。

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedValue: 'form_name1'
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange(event) { 
    this.setState({selectedValue: event.target.value}); 
  }

  renderSelectedForm (param) {
    switch(param) {
      case 'form_name1':
        return (
          <form name="form_name1" id="form_name1">
            form 1
          </form>
         )
      case 'form_name2':
        return (
          <form name="form_name1" id="form_name2">
            form 2
          </form>
        )
      case 'form_name3':
        return (
          <form name="form_name1" id="form_name3">
            form 3
          </form>
        )
      default: return null;
     }
   }

  render() {
    return (
      <div>
        <form>
          <select value={this.state.selectedValue} onChange={this.handleChange}>
            <option value="form_name1">Form 1</option>
            <option value="form_name2">Form 2</option>
            <option value="form_name3">Form 3</option>
          </select>
        </form>
        {this.renderSelectedForm(this.state.selectedValue)}
      </div>
    );
  }
}

實際操作如下： https : //codepen.io/herodrigues/pen/XOBLVb