[小白求助]antd表单验证问题

这种框架或者库的使用问题，去社区问或者提issue比较好。其他原生问题可以来这里问。

antd的官网就有你说的这种实例。。

这种问题不应该提issue，去stackoverflow 或者国内的segmentfault提问题，也可以加slack

思路很简单。 直接说解决方法你可能懵逼，也学不到东西。 我们来循序渐进的思考实现。 前提：假设我们使用了getFieldDecorator，而你应该知道，用getFieldDecorator包装过的表单项里，是只有一个组件的，就跟react16.0以前的render一样，不接受多个组件。 （1） 现在，表单里有一个表单项，对应着input输入框，业务需求是：输入框是必填的。 这个实现起来，完全没难度，就在rules里加个required:true （2） 进一步，表单里有一个表单项，对应着input输入框，业务需求是：输入框有值时，该表单项是必填的，否则，是非必填的。 这也不复杂，可以用组件的一个state来控制required是true还是false。 而通过监听input的onChange事件，可以改变这个state，即input有值的时候，就设为true，值为空的时候就设false。 简单吧。 （3） 再进一步，也就是你的需求了——【有两个文本框，必须选填一个】 思考一下这个需求。 必须选填一个，表明这两个文本框应该是在同一个表单项里，而且前面各有一个可多选的复选框checkbox。 用代码来表示，大概长这样子。 <div> <checkbox /><textarea /> <checkbox /><textarea /> </div> 仔细看看，这不就是一个组件吗？假设它名字为checkTxt, 它跟一个input输入框有什么区别？ input有值，checkTxt作为组件，也是可以有值的，input有onChange事件，它也有啊（凡是经过getFieldDecorator包装的组件，都自带有onChange事件），就算没有，手动加呗。 既然两者差不多，那需求也就由复杂变简单了。 看看需求【有两个文本框，必须选填一个】，这意思是说，必须勾选一个checkbox，而且要把对应的textarea 的值给存进表单项里。而具体勾选哪一个，或者两个都勾选了，怎么知道呢？ 明显是在这个checkTxt组件内部，通过监听它们的值变化，同步到state里，而且每次变化的时候，调用this.props.onChange，将填入的值都传给父组件，父组件根据这个值是不是空来决定是否提醒必填，也就实现了需求。 具体细节，当然是自己去搞定了。 PS：必填提醒的样式需要自己用css结合antd的样式调整一下，免得该必填的时候，不提醒，不是必填的时候，却显示成必填。

antd的开发人员？表单这里有自定义校验的示例，没有自定义样式的示例，所以lz会来问 【 在 DOTA 的大作中提到: 】 : 思路很简单。 : 直接说解决方法你可能懵逼，也学不到东西。 : 我们来循序渐进的思考实现。 : ...................

不是... 没有我们开发人员不能控制的样式呀，虽然antd组件是内部封装好的，但我们可以查看它用了哪些样式。 比如加了表单装饰后，提醒必填的时候，会有什么样式，不提醒的时候又是啥样式。直接拿对应class来改。当然了，这有个缺点，这么改是全局性的。 大多数情况，只要在antd的样式前面，加一个parent样式名，就不会改变全局样式了。不嫌麻烦就用js控制。 例如： <div className="byr"> <Input /> </div> 写样式的时候 .byr>.antd-input{ } 就能最小范围内的改变它 当然，有的时候，根本没有这些明显的样式给你改。那你还可以用react的ref直接获取组件的实例，来修改它的class名字。 不管什么库，都一样的道理。定位它，改变它。 【 在 w153409018 的大作中提到: 】 : antd的开发人员？表单这里有自定义校验的示例，没有自定义样式的示例，所以lz会来问

嗯。。。我以为你在antd组里面，所以提个建议，加一项实例，lz这样的问题会少很多 【 在 DOTA 的大作中提到: 】 : 不是... : 没有我们开发人员不能控制的样式呀，虽然antd组件是内部封装好的，但我们可以查看它用了哪些样式。 : 比如加了表单装饰后，提醒必填的时候，会有什么样式，不提醒的时候又是啥样式。直接拿对应class来改。当然了，这有个缺点，这么改是全局性的。 : ...................