这篇文章主要介绍了react的ui库antd中form表单使用SelectTree反显问题如何解决的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇react的ui库antd中form表单使用SelectTree反显问题如何解决文章都会有所收获，下面我们一起来看看吧。
1.formItem 需要使用initialValue赋值。
2.这个组件需要一开始就存在不能是条件渲染，非要用条件渲染需要让它先显示，然后根据条件让它不显示。
例子：
计算
安全
数据库
网络和加速
企业服务
state={
treeList:[],
showTree:ture,
value:[]
}
componentDidMount(){
//这里请求数据用定时器代替
setTimeOut(()=>{ //一般会先拿到listTree先渲染
this.setState({
treeList:[{value:'aaa',title:'你好react'}]
})
setTimeOut(()=>{ //第二次请求反显的值和是否显示
if(需要显示tree){ //下面俩条if一般不会有同时出现的时候
this.setState({
value:['aaa'],
})
}
if(不需要显示tree){
this.setState({
showTree:false,
})
}
})
},2000)
}
render() {
const {treeList,value,showTree}=this.state;
const tProps = {
treeData:treeList,
value:value
};
return
<Form>
<Form.Item>
{getFieldDecorator('selectTree', {
initialValue:[]
})(
{showTree&&<TreeSelect {...tProps} />}
)}
</Form.Item>
</Form>
}
在弹窗里显示一个表单，并进行回显，涉及到的组件有，简单的input框，inputNumber框，select，此处前端懒得让后端写接口点击自己获取到form表单里的数据，方法也不难 在链接处添加点击事件 代码如下（简单记录）
onClick={() => this.getInformation(info)}
//此处是点击事件的方法
getInformation = (info) => {
//此处打印的东西见下图
//此处存在问题如果强制转换了一次重复转换会报错 参数undefined
if (
typeof info.app == "string" &&
typeof info.file == "string"
)
{
console.log(info);
//把select多选的类型强制转成object类型并且赋值给原来的属性
var newObj1 = eval('('+info.app+')');
var newObj = eval('('+info.file+')');
info.file=newObj
info.app=newObj1
store.getInformation();
//储存到当前state中
this.setState({getInform:info})
}else{
this.setState({getInform:info})
}
};
//此处通过组件通信暴露给父组件
<Get putfile={this.state.getInform}/>
//父组件处接收参数 在render函数处接收
const form = this.props["putfile"];
此处为上面log打印的东西
打印的数据格式都是string类型的，对于select的多选string类型的属性当然不满足了，所以需要进行数据处理
//此处添加了 回显实例 此代码antd版本为 3 必填校验已经实现直接cv即可
//此处为input框
<Form.Item
label="应用名称"
// hasFeedback
required
>
{getFieldDecorator(
"name",
{ initialValue: form["name"] },
{
rules: [{ required: true, message: "请输入应用名称!" }],
}
)(<Input placeholder="请输入应用名称" />)}
</Form.Item>
// 此处为number框
<Form.Item label="金额" required>
{getFieldDecorator(
"money",
{ initialValue: form["money"] },
{
rules: [{ required: true, message: "请输入应用上架金额!" }],
}
)(
<InputNumber
style={{ width: "100%" }}
min="0"
step="1"
precision="2"
placeholder="请输入应用上架金额"
/>
)}
</Form.Item>
// 此处为select多选框 (此处未做必填校验)
<Col span={12}>
<Form.Item label="文件类型" hasFeedback validateStatus="">
{getFieldDecorator("file", {
initialValue: form["file"],
})(
<Select
mode="tags"
style={{ width: "100%" }}
placeholder="请选择文件类型"
onChange={this.handleChange}
>
{children}
</Select>
)}
</Form.Item>
</Col>关于“react的ui库antd中form表单使用SelectTree反显问题如何解决”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“react的ui库antd中form表单使用SelectTree反显问题如何解决”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
