再包装草刈り機を

にアップロード

オーズ

// ExplorePick
function ExplorePick({ setIsActive }) {
  const router = useRouter();
  const [select, setSelect] = useState({
    item: null,
    kind: null,
    hashtags: null,
    quantity: null,
  });
  const onClickSearchButton = () => {
    router.push({
      pathname: '/explore/result',
      query: { ...select },
    });
  };
  const onClickXButton = () => {
    setIsActive(false);
  };

  return (
    <Wrapper>
      <div>
        <Icon icon={'XButton'} size={20} onClick={onClickXButton}></Icon>
      </div>
      <h2>PICK 하세요!</h2>
      <div>
        <Filter select={select} setSelect={setSelect}></Filter>
      </div>
      <div>
        <Button
          variant="primary"
          fontWeight="400"
          borderRadius="10px"
          width="186px"
          height="38px"
          fontSize={'12px'}
          onClick={onClickSearchButton}
        >
          검색
        </Button>
      </div>
    </Wrapper>
  );
}

selectの状態をFilterに減らし、Buttonで使用する必要があり、ExplorePickによって管理される.

tip

子供から親に状態を伝える方法はありますか?

// Parent

import { Component } from 'react';

class App extends Component {

    onSearchSubmit(text) {
      // 전달된다.
    	console.log(text);
    }

    render (
    	<div>
       		<Searchbar onSubmit={this.onSearchSubmit}/>
        </div>
    );

}

// Children
import { Component } from 'react';

class Searchbar extends Component {

    state = { text: '' };

    onFormSubmit = e => {
    	e.preventDefault();
      // 인자로 받은 onSubmit 함수에 인자로 상태값을 넣어준다.
        this.props.onSubmit(this.state.text);
    }

    render (
    	<div>
            <form onSubmit={this.onFormSubmit}>
       			<input 
            		value={this.state.text}
            		onChange={(e) => {this.setState({ text: e.tartget.value})}}/>
            </form>
        </div>
    );

}

cssホットスポット

そっと起こった話題

cssを上記のようにすると、ドロップダウンメニューが開くと、ドロップダウンメニューが最後のサブアイテムになります.
cssはgetClientBoundingRect()の計算後に変化し、計算値と計算値の差をもたらす.

同じ列サイズを作成

grid

行頭未定

.grid-container {
   display: grid;
   grid-auto-columns: 1fr;
   grid-auto-flow: column;
}

行の先頭が確定しました.

grid-template-columns: repeat(3, minmax(0, 1fr));

grid auto columnsバー
2×2メッシュと仮定した場合,column(5,6)に入れると,実際には存在しない位置に入る.下図のように.

このときcolumnwidthが0の暗黙的な列が現れ、このサイズを調整する属性はgrid-auto-columnsである.

flex

flex-gridを整理するには、次のrefを表示する必要があります.

Ref

grid

メッシュ

flex naver