antd中form getFieldDecorator可以获取多个输入框的值么？

Question

有一个IP的输入框，我用了几个input组合。但是在提交表单要获取值的时候，就难住了。下面的代码是IP上面的输入框，只有一个，IP这种多个框该怎么写呢？

                
                 
                 
                        {
                            getFieldDecorator('label', {
                                rules: [{ required: true, message: '子网名称不能为空!' }]
                            })(
                                <Input placeholder='请输入子网名称'></Input>
                                )
                        }

Answer 1

把input的每个value拼接起来；然后赋值给一个变量；不就成了一个ip地址了

Answer 2

你这还是在用3.x的antd吗？
getFieldDecorator只能处理一个组件，但你可以将IP的几个文本框封装成一个组件，getFieldDecorator那里就用你封装的组件不就行了吗

export function IPInput({value, onChange}){
    const [val, setVal] = useState([]);
    useEffect(()=>{
        if(value){
            setVal(value.split("."));
        }else if(val.length > 0){
            setVal([]);
        }
    }, [value]);

    function change(e){
        let segment = e.target.dataset.segment;
        let newVal = val.slice(0, 4);
        newVal[segment] = e.target.value;
        setVal(newVal);

        if(/*判断是否四个IP段都输入完整*/){            
            onChange(newVal.join("."));
        }else if(value){
            onChange(undefined);
        }
    }
    return (
        <Space>
            <Input data-segment="0" value={val[0]} onChange={change}/>
            <Input data-segment="1" value={val[1]} onChange={change}/>
            <Input data-segment="2" value={val[2]} onChange={change}/>
            <Input data-segment="3" value={val[3]} onChange={change}/>
        </Space>
    );
}

上面只是一个示例，并不完整，且没有经过运行验证，只是为你提供一个封装思路。

Answer 3

同问同问同问同问同问同问同问同问同问同问同问