Reactjs 如何在antd'；提交表格？

我制作了一个名为

TagsInput

的自定义组件，并将其添加到表单中。我的问题是，提交表单时，字段

标记

的值始终未定义，因为

表单.Item

无法从

标记输入

子项检索值。当

Form.Item

的子项是antd组件时，这通常不是问题

export default function NewProjectForm(props) {
  return (
    <Form layout="vertical" onFinish={props.onSubmit} id="newProjectForm">   
      <Form.Item label="Tags" name="tags">
        <TagsInput />
      </Form.Item>
    </Form>
  );
}

我不想将值字段从

TagsInput

状态提升到

NewProjectForm

，因为它不是类组件。。。我这样做只是为了解决这个问题。我问这个问题是因为我认为有一个更干净的方法来解决这个问题

如何使

NewProjectForm

从其状态中检索

TagsInput

的值？

---

是否有任何函数可以作为属性传递给

TagsInput

，以便表单在提交时向组件请求一个值？

为了实现所需，您需要在父组件（

NewProjectForm

）处处理表单（及其组件）的状态

如果您愿意将该组件保留为功能组件，则可以使用

useState

使用并定义状态，如下所示：

const [tagValue, setTagValue] = useState([]);

export default function NewProjectForm(props) {

  const [tagValue, setTagValue] = useState([]);

  return (
    <Form layout="vertical" onFinish={props.onSubmit} id="newProjectForm">   
      <Form.Item label="Tags" name="tags">
        <TagsInput setTagValue={(val)=>setTagValue(val)} />
      </Form.Item>
    </Form>
  );
}

class TagsInput extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value: []
        }
    }

    ......... 
    ......... 
    onChangeInput(val){
        this.props.setTagValue(val);
    }
    ......... 
    ......... 

    render(){
        return(<div></div>)
    }
}

而

tagValue

是您将从子

TagsInput

获得的值，而

setTagValue

是可以设置该值的函数。您需要将

setTagValue

作为函数属性传递给

TagsInput

并在更改时使用它。它看起来像这样：

const [tagValue, setTagValue] = useState([]);

export default function NewProjectForm(props) {

  const [tagValue, setTagValue] = useState([]);

  return (
    <Form layout="vertical" onFinish={props.onSubmit} id="newProjectForm">   
      <Form.Item label="Tags" name="tags">
        <TagsInput setTagValue={(val)=>setTagValue(val)} />
      </Form.Item>
    </Form>
  );
}

class TagsInput extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            value: []
        }
    }

    ......... 
    ......... 
    onChangeInput(val){
        this.props.setTagValue(val);
    }
    ......... 
    ......... 

    render(){
        return(<div></div>)
    }
}

---

感谢您的回复@SomoKRoceS。因此，本质上，这是将状态提升到父组件。antd如何处理自己的组件？我不需要父组件上的

输入

状态就可以让表单在提交时访问其值…哦，好的，我现在得到了。。实际上，您需要遵循使用

自定义表单控件的步骤，如下所述。您需要传递一个具有
value
和
onChange
的对象来更改该值。然后，
表单
组件应设法自动获取该值。我正在编辑答案，效果很好。事实上，默认情况下，Antd将
值
和
onChange
传递给
表单.Item
的子项。我们可以使用该API与父级（
Form.Item，在本例中为
）状态进行通信。谢谢你的回复。