antd-mobile中使用rc-form，如何設(shè)置自定義組件的value？

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>//這個(gè)能取到值
         <MixedInput {...getFieldProps('input2')}>自定義組件</MixedInput>//這個(gè)取到值是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

這樣設(shè)置并不能起作用，在submit獲取到的屬性值始終是undefined，哪位大神麻煩告訴我自定義組件rc-form的使用，感激不盡

回答

編輯回答

咕嚕嚕

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

2018年9月11日 18:18

編輯回答

陌顏

value和onChange不用自己寫 getFieldProps會(huì)自己會(huì)傳你只需要在組件內(nèi)調(diào)用就好了
在組件內(nèi)把你所需要的值傳給onChange(newValue), 而value是在getFieldProps('name', {initialValue: ''})這時(shí)就是初始值

2017年9月1日 17:55

編輯回答