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。每个元素都会根据您当前的状态进行渲染，并返回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

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

4 个答案: