Question

render() {
    return (
      <div className>
        <Select
          label="Gender"
          placeholder=""
          options={['Male', 'Female']}
        />
        <br/>
        <TextField
          className="outlinedText"
          label="Income"
          onChange={this.getIncome}
        />
        <br/>
        <p>Are you married?</p> 
        <Radio
          value="yes"
          checked={this.state.married === "yes"}
          onChange={evt => this.setState({married: evt.target.value})}>
          Yes
        </Radio>
        <Radio
          value="no"
          checked={this.state.married === "no"}
          onChange={evt => this.setState({married: evt.target.value})}>
          No
        </Radio>
        <br/>
        <p>Have you finished your education?</p> 
        <Radio
          value="yes"
          checked={this.state.graduated === "yes"}
          onChange={evt => this.setState({graduated: evt.target.value})}>
          Yes
        </Radio>
        <Radio
          value="no"
          checked={this.state.graduated === "no"}
          onChange={evt => this.setState({graduated: evt.target.value})}>
          No
        </Radio>
        <br/>
        <p>Are you self-employed?</p> 
        <Radio
          value="yes"
          checked={this.state.graduated === "yes"}
          onChange={evt => this.setState({graduated: evt.target.value})}>
          Yes
        </Radio>
        <Radio
          value="no"
          checked={this.state.graduated === "no"}
          onChange={evt => this.setState({graduated: evt.target.value})}>
          No
        </Radio>
        <br/>
        <TextField
          className="outlinedText"
          label="Monthly Income($)"
          onChange={this.getIncome}
        />
        <TextFieldHelperText>What is your monthly income($)?</TextFieldHelperText>
        <br/>
        <TextField
          className="outlinedText"
          label="Coappliant Income($)"
          onChange={this.getIncome}
        />
        <TextFieldHelperText>What is your coappliant's monthly income($)?</TextFieldHelperText>
        <br/>
        <TextField
          className="outlinedText"
          label="Loan Amount($)"
          onChange={this.getIncome}
        />
        <TextFieldHelperText>What is your loan amount($) in thousands?</TextFieldHelperText>
        <br/>
        <TextField
          className="outlinedText"
          label="Loan Term"
          onChange={this.getIncome}
        />
        <TextFieldHelperText>What is your term of loan in months?</TextFieldHelperText>
        <br/>
        <Select
          label="Credit Score"
          placeholder=""
          options={['300-579', '580-669', '670-739', '740-799', '800-850']}
        />
        <br/>
        <Select
          label="Property Area"
          placeholder=""
          options={['Urban', 'Semi-urban', 'Rural']}
        />
        <br/>

        <br/>

        <br/>

        <br/>

      </div>
    )
  }
}

这是我的反应渲染的样子。我想使其并排对齐。但是，我不确定必须使用哪种样式以及执行此任务的良好实践。下面是图像，而草图是我真正想要的。

我以为display:inline-block可以做到，但没有任何改变。

display:flex; flex-direction:row;也没有做这项工作。

我基本上想创建一个简洁的表单界面。

谢谢。

Answer 1

我建议您对渲染函数进行一些重构，并向其中添加一些CSS，如下所示：

渲染：

<div className='myForm'>
    <Select
      label="Gender"
      placeholder=""
      options={['Male', 'Female']}
    />

    <TextField
      className="outlinedText"
      label="Income"
      onChange={this.getIncome}
    />
    <div>
      <p>Are you married?</p> 
      <Radio
        value="yes"
        checked={this.state.married === "yes"}
        onChange={evt => this.setState({married: evt.target.value})}>
        Yes
      </Radio>
    </div>
    <Radio
      value="no"
      checked={this.state.married === "no"}
      onChange={evt => this.setState({married: evt.target.value})}>
      No
    </Radio>
    <div>
      <p>Have you finished your education?</p> 
      <Radio
        value="yes"
        checked={this.state.graduated === "yes"}
        onChange={evt => this.setState({graduated: evt.target.value})}>
        Yes
      </Radio>
    </div>
    <Radio
      value="no"
      checked={this.state.graduated === "no"}
      onChange={evt => this.setState({graduated: evt.target.value})}>
      No
    </Radio>
    <div>
    <p>Are you self-employed?</p> 
    <Radio
      value="yes"
      checked={this.state.graduated === "yes"}
      onChange={evt => this.setState({graduated: evt.target.value})}>
      Yes
    </Radio>
   </div>
    <Radio
      value="no"
      checked={this.state.graduated === "no"}
      onChange={evt => this.setState({graduated: evt.target.value})}>
      No
    </Radio>

    <TextField
      className="outlinedText"
      label="Monthly Income($)"
      onChange={this.getIncome}
    />
    <TextFieldHelperText>What is your monthly income($)?</TextFieldHelperText>

    <TextField
      className="outlinedText"
      label="Coappliant Income($)"
      onChange={this.getIncome}
    />
    <TextFieldHelperText>What is your coappliant's monthly income($)?</TextFieldHelperText>

    <TextField
      className="outlinedText"
      label="Loan Amount($)"
      onChange={this.getIncome}
    />
    <TextFieldHelperText>What is your loan amount($) in thousands?</TextFieldHelperText>

    <TextField
      className="outlinedText"
      label="Loan Term"
      onChange={this.getIncome}
    />
    <TextFieldHelperText>What is your term of loan in months?</TextFieldHelperText>

    <Select
      label="Credit Score"
      placeholder=""
      options={['300-579', '580-669', '670-739', '740-799', '800-850']}
    />

    <Select
      label="Property Area"
      placeholder=""
      options={['Urban', 'Semi-urban', 'Rural']}
    />

如您所见，我删除了所有br标签，并在所有有p标签和收音机的地方删除了这两个元素，将它们包装在一个div中。现在是CSS：

.myForm {
  max-width: 300px; //this is arbitrary, you need to find here what is the best value for you
  display: flex;
  flex-wrap: wrap;
}

此CSS将按您希望的方式排列元素。您很有可能需要稍微调整一下CSS，因为我不知道您使用的是什么UI，语义，材料或其他内容，因此我无法为您的问题设置codeendbox。但是，这至少对您来说是开始。

如何并排对齐反应组件

1 个答案: