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

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

Answer 2

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

Answer 3

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