Question

因此，我想将选择的选项放在选择字段下方的多数组选择器中，我想知道是否有比仅使用CSS更好的方法来实现此目的？

阅读文档，我真的找不到任何允许这样做的道具等。

我尝试使用普通CSS将它们向下移动，但是似乎应该有更好的方法来实现它。

请暂时忽略选择器。

TextView recordCount;
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_marker_specification);
        recordCount = (TextView) findViewById(R.id.mainFragment_recordCount);
        DatabaseHelper helper = new DatabaseHelper(mContext);
        String productRecord = helper.checkRecord("productname");
        //checkRecord will return quantity if index found and give productRecord that value.
        if(!productRecord.equals("")){
                recordCount.setVisibility(View.VISIBLE);
                recordCount.setText(productRecord);
                // If not empty, make TextView visible and set it's text to that quantity.
        }

         ....

        //(Your onCreate goes on)
         ....


}

Answer 1

强烈建议您使用“ JS中样式”方法对react-select进行任何样式的自定义。

对于您的特定需求，我会这样：

const styles = {
  control: base => ({
    ...base,
    justifyContent: "flex-end"
  }),
  valueContainer: base => ({
    ...base,
    position: "absolute",
    width: "100%",
    top: "40px"
  })
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      values: false
    };
  }
  onChange = options => {
    this.setState({
      values: options
    });
  };
  render() {
    return (
      <div className="App">
        <Select
          onChange={this.onChange}
          isMulti
          options={options}
          styles={this.state.values.length > 0 && styles}
          value={this.state.values}
        />
      </div>
    );
  }
}

有两个重要部分：

CSS部分由styles道具代替。您会看到有两个地方需要更新； control容器和valueContainer。如果不更新justifyContent的{{1}}属性，则图标将最终显示在所选内容的左侧。
我们控制control道具的状态部分。从技术上讲，它并不是真正需要的，但是我已经添加了它，因此当select为空时，我们可以轻松地还原自定义value道具，并且在styles组件中具有占位符。

这里是live example。

多重选择器，将选择的选项放在输入元素下

1 个答案: