fieteam / fie-toolkit-qnui Goto Github PK

`const FormItem = Form.Item;
const { Group: RadioGroup } = Radio;
const { Group: CheckboxGroup } = Checkbox;

const list = [
  {
      value: 'apple',
      label: '苹果'
  }, {
      value: 'pear',
      label: '梨'
  }, {
      value: 'orange',
      label: '橙子'
  }
];
class FromDemo extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.field = new Field(this);
  }
    handleSubmit(e) {
        e.preventDefault();
        console.log('收到表单值：', this.field.getValues());
        this.field.validate();
    }
//回调
    transferPointValue(pointVaue){
        this.setState({
			pointVaue
        })
        setTimeout(() => {
            console.log(this.state.pointVaue);
        }, 1000);
        
    }

    render() {
        const init = this.field.init;
        const formItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 14},
        };
        const insetItemLayout = {
            labelCol: {span: 6},
            wrapperCol: {span: 18},
        };
        return (
          <div className="containter-all">
            <div className="container-title-box">
              <h2 className="container-title">test</h2>
            </div>
            <Form field={this.field} labelAlign='left'
                      labelTextAlign='right'>
                      <PointComponent getField={() => this.getField()} transferPointValue = {pointVaue => this.transferPointValue(pointVaue)} vip1PointValue="1" vip2PointValue="2" vip3PointValue="3" vip4PointValue="4" vip5PointValue="5" vip6PointValue="6" />
                <FormItem
                    label="密码："
                    {...formItemLayout}>
                    <Balloon trigger={<Input htmlType="password"/>} align="r" triggerType="hover">
                          input password
                    </Balloon>
                </FormItem>
                <Grid.Row style={{ marginTop: 24 }}>
                    <Grid.Col offset="6">
                        <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
                    </Grid.Col>
                </Grid.Row>
            </Form>
          </div>
        );
    }
}

ReactDOM.render(<FromDemo />, document.getElementById('container'));`

const FormItem = Form.Item;

class PointComponent extends React.Component {
    constructor(props, context) {
        super(props, context);
        this.field = new Field(this,{
        onChange: (name, value) => {
            switch (name) {
                case 'vip1PointValue':
                    let pointVaue = {[name] : value};
                    this.prop.transferPointValue(pointVaue);
                    this.field.setValue('vip1PointValue', value);
                    console.log(this.field.getValues());
                    break;
                }
            }
        });
    }

    handleSubmit(e) {
        e.preventDefault();
        console.log('收到表单值：', this.prop.pfield.getValues());
    }
    render() {
        const init = this.field.init;
        return (
            <div>
                <FormItem label="VIP1" >
                    <Input htmlType="number" className="short-input" {...init('vip1PointValue', {initValue:this.props.vip1PointValue})} step="1" min="1" maxLength="5" style={{width: 60}}/>
                    <span className="input-line-text">积分</span>
                </FormItem>
                <Button type="primary" onClick={this.handleSubmit.bind(this)}>确定</Button>
            </div>
        );
    }
}

export default PointComponent;