javascript - React中表单中的条件渲染无法正常工作

我正在尝试让该组件根据选择选项显示特定形式。我正在使用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;

最佳答案

在您的状态下为要显示的第一个表单设置默认值，例如form_name1。或在选择元素中添加“选择表单”之类的选项。

如果要进行条件渲染，则实际上不需要在元素中设置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

关于javascript - React中表单中的条件渲染无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54678911/