Antd-mobile中使用rc-form，如何设置自定义组件的value？

#1 
class MyComponent  extends Component {
  submit = () => {
    this.props.form.validateFields((error, value) => {
      if (error != undefined) {
        console.error(error);
      }
      console.log(value);
    });
  }
  render() {
    const { getFieldsError, getFieldProps } = this.props.form;
    return  <div>
         <InputItem {...getFieldProps("input1")} >文本框</InputItem>//这个能取到值
         <MixedInput {...getFieldProps('input2')}>自定义组件</MixedInput>//这个取到值是undefined
    </div>
  }
}

export default createForm()(MyComponent)

rc-form要求组件必须具有value和onChange

getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }
Will create props which can be set on a input/InputComponent which support value and onChange interface.

After set, this will create a binding with this input.

MixedInput是我自定义的组件

class MixedInput extends Component {
    value = () => {
        return "xxx"
    }
    onChange = () => {
        console.log("set value")
        this.setState({ value: 'xxx' });
    }
    render() {
        let options = this.props.items.map(function (option, idx) {
            return { value: option.value, label: option.text }
        });
        return (
            <div>
                <Picker data={options} cols={1}  onChange={this.onChange}>
                    <List.Item>{this.props.label}</List.Item>
                </Picker>
                <TextareaItem rows={3} onChange={this.onChange} />
            </div>
        )
    }
}
export default MixedInput

这样设置并不能起作用，在submit获取到的属性值始终是undefined，哪位大神麻烦告诉我自定义组件rc-form的使用，感激不尽

#2

form 都没挂载到组件上 props 你确定能拿到form 属性，看下 官网文档

#3

你这差的有点多，话说找文档什么的看看不就行了，有完整的使用方法。

#4

抱歉，这个是代码片段，实际是已经有挂上去的

export default createForm()(MyComponent)
#5

可能是我上面伪代码没写清楚，我已经重新编辑了，麻烦帮我看下，谢谢

#6

从this.props.form里面获取getFieldProps后，传给你自己定义的input子组件，在子组件内使用getFieldProps就行了，不是在引用子组件时候用的

#8

感谢解答，按照你的方法，代码如下

class MyComponent  extends Component {
  submit = () => {
    this.props.form.validateFields((error, value) => {
      if (error != undefined) {
        console.error(error);
      }
      console.log(value);
    });
  }
  render() {
    const { getFieldsError, getFieldProps } = this.props.form;
    return  <div>
         <InputItem {...getFieldProps("input1")} >文本框</InputItem>
         <MixedInput getFieldProps={getFieldProps}>自定义组件</MixedInput> //把getFieldProps通过props传递进去
        <Button type="primary" onClick={this.submit}>提交</Button>
    </div>
  }
}

export default createForm()(MyComponent)


class MixedInput extends Component {
   state = {
        value:''
    }
    constructor(props) {
        super(props);
        this.onOK = this.onOK.bind(this);
    }
    onOK(val) {
        this.setState({ value: val[0] });//实现picker和TextareaItem 数据绑定
    }
    render() {
        const { getFieldProps } = this.props;
        let options = this.props.items.map(function (option, idx) {
            return { value: option.value, label: option.text }
        });
        return (
            <div>
                <Picker data={options} cols={1}   onOk={this.onOK}>
                    <List.Item>{this.props.label}</List.Item>
                </Picker>
                <TextareaItem {...getFieldProps("input2")} rows={3}  onChange={v => this.setState({ value: v })} value={this.state.value}/>
            </div>
        )
    }
}
export default MixedInput

点击提交后获取到的值还是undefined，如果把TextareaItem 的onChange和value属性去掉，就可以获取到了，即

<TextareaItem {...getFieldProps("input2")} rows={3} />

但是那样无法实现picker组件选择后自动填充到TextareaItem 的效果，这个如何解决？

#9

在父组件从this.props.form获取 setFieldsValue 传到子组件，然后在需要在映射数据的操作里这样写，试试
this.props.setFieldsValue({
input2: // value
});

#10

解决了，谢谢大佬