更改下拉列表中箭头的状态

Question

下面的代码说明了一个普通的下拉列表。为了指示下拉列表，我使用了向下箭头 arrow_drop_down 在列表的任何状态（打开或关闭）中，这个箭头对我来说都是静态的。但是，我希望在单击列表时，箭头变为 arrow_drop_up .

那些。这样列表的两个不同状态，就会有两个不同的箭头。

    export default function FilterStatusCode() {
  const [values, setValues] = React.useState([]);

  const [isExpanded, setIsExpanded] = useState(false);

  const toggleExpand = () => {
      setIsExpanded(!isExpanded);
  };

  return <>
    <div className="item-toggle-statuscode" onClick={toggleExpand}>
        <h6>Status Code</h6>
          <span class="material-icons">
            arrow_drop_down
          </span>
    </div>
    { isExpanded &&
      <div>
        <TagInput
          inputProps={{ placeholder: 'Add status code...' }}
          values={values}
          onChange={(values) => {
          setValues(values)}}>
        </TagInput>
      </div>
    }
</>;
}

Answer 1

尝试

 <div className="item-toggle-statuscode" onClick={toggleExpand}>
    <h6>Status Code</h6>
      <span class="material-icons">
       { isExpanded ? arrow_drop_up : arrow_drop_down }
      </span>
</div>

Answer 2

您可以根据当前状态选择使用哪个箭头：

// If the list is open show the `up` arrow
// otherwise show the `down` arrow
<span className={open ? "up" : "down"}></span>

我不得不在这个例子中即兴创作，并在 class 名称中使用了 unicode。

const { useState } = React;

function Example() {
  return (
    <div>
      <Item />
      <Item />
    </div>
  );
}

function Item() {

  const [ input, setInput ] = useState('');
  const [ open, setOpen ] = useState(false);

  function handleChange(e) {
    setInput(e.target.value);
  }

  function handleOpen() {
    setOpen(!open);
  }

  function handleClick() {
    console.log(input);
  }

  return (
    <div className="item">
      <div onClick={handleOpen} className="heading"> 
        <span>Status code</span>
        <span className={open ? "up" : "down"}></span>
      </div>
      {open && (
        <div>
          <input
            type="text"
            onChange={handleChange}
            value={input}
          />
          <button
            type="button"
            onClick={handleClick}
          >Submit
          </button>
        </div>
      )}
    </div>
  );

}

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

.down:after { content: 'BC'; }
.up:after { content: 'B2'; }
.heading:hover { cursor: pointer; color: red; }
.item { margin-bottom: 1em; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

其他文档

Conditional (ternary) operator

更改下拉列表中箭头的状态

Change the state of arrows in a dropdown list

javascript

reactjs