gpt4 book ai didi

javascript - 包含动态 html 的 React 函数返回未呈现

转载 作者:塔克拉玛干 更新时间:2023-11-02 23:00:06 25 4
gpt4 key购买 nike

<分区>

所以我有一个函数可以过滤传递的参数是选择、文本还是日期字段,并动态添加到渲染 jsx。

当我触发返回时,它不会呈现 html/jsx 返回。我已经在 console.logs 而不是 html 中进行了测试,它成功了,这告诉我 switch 语句的结构是正确的,我正在传递正确的类型,只是 html 返回不想呈现。没有警告或错误。当我 console.log 我得到的 checkType 函数时

enter image description here

没有警告或错误。

下面是this.getFields()验证传递的数据图片

enter image description here

// wrapped in a react class

checkType(type, options, placeholder, name, handleUpdatedValue, defvalue, index) {

let select = <select onChange={handleUpdatedValue.bind(this)} >{options.map((option, i) => <option value={option} key={i}>{option}</option>)}</select>;
let text = <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="text" />
let date = <input onChange={handleUpdatedValue.bind(this)} name={name} placeholder={placeholder} type="date" />

switch(type) {
case 'select':
return select
break;
case 'text':
return text
break;
case 'date':
return date
break;
default:
console.log('Error: Invalid Type');
}
}

handleSubmit() {

}

render() {

let values = this.state.fieldValues;
const checkType = this.checkType.bind(this);

return(
<div className="formwrapper thinshadow">
<h3>{this.props.header}</h3>
{this.getFields().map((field, i) => {
<div key={i} className={field.classes}>
{checkType(field.type, field.options, field.placeholder, field.name, this.handleUpdatedValue.bind(this), field.defvalue, field.index)}
<div className="minilabel"></div>
</div>
})}

<button className="btn btn-primary"
onClick={() => this.props.onClick(values)} >
Save
</button>
</div>
);
}

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com