te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - How to disable selected values from getting displayed in input bar in react-select? - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - How to disable selected values from getting displayed in input bar in react-select? - Stack Overflow

    javascript - How to disable selected values from getting displayed in input bar in react-select? - Stack Overflow

    programmeradmin4浏览0评论
    const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

const Option = props => { 
  //const temp = "some";
  //
  return ( 
  <div> 
    <ponents.Option {...props}> 
      <input type="checkbox" checked={props.isSelected} onChange={() => null} /> 
      <label>{props.value}</label> 
    </ponents.Option>
  </div> 
  ); 
};

    Currently my code looks like above, what it does is, it is displaying something like this ScreenShot

    I don't want to display selected values in search input bar.Is there any way to disable selected option from getting displayed in input bar ?

    Code for Select Bar 

    <Select ponents={{ Option }} isMulti closeMenuOnSelect={false} hideSelectedOptions={false} options={options} />

    const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
];

const Option = props => { 
  //const temp = "some";
  //
  return ( 
  <div> 
    <ponents.Option {...props}> 
      <input type="checkbox" checked={props.isSelected} onChange={() => null} /> 
      <label>{props.value}</label> 
    </ponents.Option>
  </div> 
  ); 
};

    Currently my code looks like above, what it does is, it is displaying something like this ScreenShot

    I don't want to display selected values in search input bar.Is there any way to disable selected option from getting displayed in input bar ?

    Code for Select Bar 

    <Select ponents={{ Option }} isMulti closeMenuOnSelect={false} hideSelectedOptions={false} options={options} />
    • javascript
    • reactjs
    • react-select
    Share Improve this question edited Feb 18, 2019 at 11:23 Yash Chauhan asked Feb 18, 2019 at 10:40 Yash ChauhanYash Chauhan 903 silver badges8 bronze badges 1
    • You will have to manually filter out selected values and display remaining – Rajesh Commented Feb 18, 2019 at 10:42
    Add a ment  | 

    4 Answers 4

    Reset to default 11

    there is a new props controlShouldRenderValue = { false } then it will not display selected option in input bar, even after selecting option from drop down list as mention below

    <Select
 ponents={{ Option }}
 isMulti closeMenuOnSelect={false}
 hideSelectedOptions={false}
 controlShouldRenderValue = { false }
 options={options} />

    So, in the search box it will display placeholder

    I suspect it's to do with the hideSelectedOptions prop you're passing into the Select ponent here:

    <Select hideSelectedOptions={false} />

    I would try setting it to true (or removing it) and see if that solves your issue.

    One option is to define the custom ponent with an empty div

    const MultiValueContainer = props => {
  return (
    <div></div>
  );
};

class PriceFilter extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return [
      <Select
        isMulti
        ponents={{ MultiValueContainer }}
        options={this.props.options}
        className="basic-multi-select"
        classNamePrefix="select"
        hideSelectedOptions={false}
        closeMenuOnSelect={false}
      />
    ];
  }
}

    You could simply render out your options only if their isSelected is false, and in the other case, send out an empty div using a ternary condition :

    const Option = props => {
    return !props.isSelected ?
        <div>
            <ponents.Option {...props}>
                <input type="checkbox" checked={props.isSelected} onChange={() => null} />
                <label>{props.value}</label>
            </ponents.Option>
        </div>
        :
        <div/>
};

    You will have to return a JSX node in every cases, returning null (or an equivalent) will generate a warning/error.

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论