Question

我有一个表单组件，我想根据该选项中的第一个选择显示和隐藏3种不同的表单。用状态动态执行此操作的最佳方法是什么？

class Form extends Component {
    state = {
        selectedValue: ''
    };

    render() {
         const formStyle = {
            display: 'none'
        }
        return (
              <div className={styles.ContactUs}>
                  <form >
                    <select>
                        <option value="" selected="selected"></option>
                        <option value="form_name1">Form 1</option>
                        <option value="form_name2">Form 2</option>
                        <option value="form_name3">Form 3</option>
                    </select>
                 </form>
                 {
                    this.state.selectedValue === id.value ?
                <form name="form_name1" id="form_name1" style={formStyle}>
                form 1
                </form> : null
                 }

                <form name="form_name2" id="form_name2" style={formStyle} >
                form 2
                </form>

                <form name="form_name3" id="form_name3" style={formStyle} >
                form 3
                </form>

            </div>
        );
    }
}

export default Form;

Answer 1

尝试这样

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

renderSelectedForm(param) {
  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;
  }
}

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

render() {
  return (
    <div>
      <div className={styles.ContactUs}>
              <form >
                <select value={this.state.selectedValue} onChange={this.handleChange}>
                    <option value="" selected="selected"></option>
                    <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>
  );
}

Answer 2

您可以使用嵌套的if和state来检查应显示的内容。示例代码在下面给出

 class App extends Component {
  constructor(){
    super();
    this.state = {
      selected:2
    }
  }

  render() {
    return (
      <div>
        {
          this.state.selected == 1 ? (
            <div> I am form 1 </div>
          ) : this.state.selected == 2 ? (
            <div> I am form 2 </div>
          ) : this.state.selected == 3 ? (
            <div> I am form 3 </div>
          ) : null
        }
      </div>
    );
  }
}

export default App;

根据React中的选项显示一个表单

2 个答案: