javascript - 如何避免使用 typescript 生成的表单中的换行？

Question

我正在开发一个 ReactJS 元素。目标很简单:我想要所有三个 <FormItem>出现在一行中，没有换行。相反，我获得如下输出:

在 myComponent.tsx我有以下render()功能:

render() {
  const { getFieldDecorator } = this.props.form;
  const formItemLayoutType = {
          labelCol: { span: 1, offset: 0 },
          wrapperCol: { span: 3, offset: 0 },
  };
  const myForm = {
         display: "inline",
         whiteSpace: "nowrap"
  } as React.CSSProperties;

  return (
    <Form onSubmit={this.handleSubmit} style={myForm}>
     <span>
      <FormItem 
       // {...formItemLayoutType}  // originally, this was not commented out
       hasFeedback
      >
         {getFieldDecorator('select', { valuePropName: "fileType" })(
                        <Select placeholder="Select file type" style={{ width: "150px" }}>
                            <Option value="PD">Probabilty of default</Option>
                            <Option value="FX">Exchange Rate</Option>
                        </Select>
                        )}
      </FormItem>
      <FormItem>
         <Button type="primary" htmlType="submit"
                 disabled={this.disabledImportButtonChecker()}>Import</Button>
      </FormItem>
     </span>
    </Form>
  );
 }
}

我添加了<span>和 style={myForm} ，其余代码是历史性的。我只是不明白为什么它看起来仍然如下，而不是水平排列。

引用文献

• Prevent <form> line break between two <form> tags建议使用 display: inline 。
• https://alligator.io/css/prevent-line-break/

Answer 1

更改 <span>到 <div> ，并为其指定样式 display: flex;

查看示例(为了简单起见，我添加了内联样式，您应该按照所有样式的方式放置它)

//** inline style for simplicity **//
<span style={{display:"flex"}}>
    <FormItem 
        // {...formItemLayoutType}  // originally, this was not commented out
        hasFeedback
    >
        {getFieldDecorator('select', { valuePropName: "fileType" })(
            <Select placeholder="Select file type" style={{ width: "150px" }}>
                <Option value="PD">Probabilty of default</Option>
                <Option value="FX">Exchange Rate</Option>
            </Select>
        )}
    </FormItem>
    <FormItem>
        <Button type="primary" htmlType="submit"
            disabled={this.disabledImportButtonChecker()}>Import</Button>
    </FormItem>
</span>