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;

类表单扩展组件{
状态={
selectedValue:“”
};
handleChange（事件）{
this.setState（{selectedValue:event.target.value}）；
}
renderSelectedForm=（参数）=>{
const formStyle={
显示：“无”
}
开关（参数）{
案例“表格名称1”：
返回
表格一
;
案例“表格2”：
返回
表格二
;
案例“表格名称3”：
返回
表格三
;
违约：
返回null；
}
}
render（）{
返回(
表格一
表格二
表格三
{this.renderSelectedForm（this.state.selectedValue）}
);
}
}
导出默认表单；

您的

显示设置为“无”。
您的
显示设置为“无”。
您需要在
（）
内包装。如下

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

开关（参数）{
案例“表格名称1”：
返回(
表格一
);                        
...
}
您需要在
（）
内包装。如下

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

开关（参数）{
案例“表格名称1”：
返回(
表格一
);                        
...
}

您需要为
handleChange
函数创建一个绑定
this
的构造函数，或者用上面的方法声明它，它会自动绑定

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

您需要为
handleChange
函数创建一个绑定
this
的构造函数，或者用上面的方法声明它，它会自动绑定

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

在您的状态中为要显示的第一个表单设置默认值，例如
form\u name1
。或者在Select元素中添加类似“选择表单”的选项

如果要进行条件渲染，则实际上不需要在元素中设置
display:none
。每个元素将根据您的当前状态呈现，并返回
null
以卸载组件

类表单扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
selectedValue:“表单名称1”
}
this.handleChange=this.handleChange.bind（this）
}
handleChange（事件）{
this.setState（{selectedValue:event.target.value}）；
}
renderSelectedForm（参数）{
开关（参数）{
案例“表格名称1”：
返回(
表格一
)
案例“表格2”：
返回(
表格二
)
案例“表格名称3”：
返回(
表格三
)
默认值：返回null；
}
}
render（）{
返回(
表格一
表格二
表格三
{this.renderSelectedForm（this.state.selectedValue）}
);
}
}

下面是实际操作：
在您的状态中为要显示的第一个表单设置一个默认值，例如
form\u name1
。或者在Select元素中添加类似“选择表单”的选项

如果要进行条件渲染，则实际上不需要在元素中设置
display:none
。每个元素将根据您的当前状态呈现，并返回
null
以卸载组件

类表单扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
selectedValue:“表单名称1”
}
this.handleChange=this.handleChange.bind（this）
}
handleChange（事件）{
this.setState（{selectedValue:event.target.value}）；
}
renderSelectedForm（参数）{
开关（参数）{
案例“表格名称1”：
返回(
表格一
)
案例“表格2”：
返回(
表格二
)
案例“表格名称3”：
返回(
表格三
)
默认值：返回null；
}
}
render（）{
返回(
表格一
表格二
表格三
{this.renderSelectedForm（this.state.selectedValue）}
);
}
}

下面是实际操作：
这并不能解决问题-我目前无法读取的属性“setState”undefined@MaxT使用箭头函数修复此问题。这并不能解决此问题-我当前无法读取的属性“setState”undefined@MaxT使用箭头函数修复该问题。