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

Question

class MyComponent  extends Component {
  submit = () => {
    this.props.form.validateFields((error, value) => {
      if (error != undefined) {
        console.error(error);
      }
      console.log(value);
    });
  }
  render() {
    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的使用，感激不尽

Answer 1

哪位好心人士帮帮我

Answer 2

class MixedInput extends Component {

constructor(props) {
    super(props);
    this.state = {
      value: 1,
    };
  }
onChange = () => {
    console.log("set value")
    this.setState({ value: 'xxx' },()=>{
            this.props.onChange(this.state.value)
    });
}
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

Answer 3

没这么写过，你可以试试把getFieldProps传给子组件

Answer 4

value和onChange不用自己写 getFieldProps会自己会传 你只需要 在组件内调用就好了
在组件内把你所需要的值传给onChange(newValue), 而value是在getFieldProps('name', {initialValue: ''})这时就是初始值

Answer 5

用的是antd里的组件可以直接把getFieldProps传进子组件，然后分别包装。
不是antd就不好说。