: defaultValue ' ' ' ' 、 ''''' ' ' ' ' ' ' ' ' ' 또는 소품을 사용합니다 : defaultValue ' ' ' ' 、 ''''' ' ' ' ' ' ' ' ' ' 또는 소품을 사용합니다 defaultValue '''''' 소품을 사용''으로 설정하는 ''으로 설정하는 '..

: defaultValue ' ' ' ' 、 ''''' ' ' ' ' ' ' ' ' ' 또는 소품을 사용합니다''으로 설정하는 시나리오 A 사용자에게 드롭다운이 표시되고 사용자가 옵션을 선택합니다.그 드롭다운을 표시해, 그 옵션을 지난번 그 유저에 의해서 선택된 디폴트치로 하고 싶다. 선택한 Atribute on 옵션을 사용 중이지만 React는 기본값 on select를 사용하라는 경고를 생성합니다. 예를 들어, 렌더링: function() {let option_id = [0, 1];옵션 = [{name: 'a'}, {name: 'b'}]; selectedOptionId = 0으로 설정 반환(<select default Value={selected OptionId}>{option_id.map(ID =><option key={id} value={id}>{interface[id].name}<옵션>)}</select>)}}); 문제는 selected Option Id를 모른다는 것입니다.선택한 옵션은 어떤 옵션도 될 수 있기 때문입니다.default Value를 찾으려면 어떻게 해야 하나요?React는 양식 구성 요소 간의 일관성을 위해 선택된 값 대신 값을 사용합니다.defaultValue를 사용하여 초기값을 설정할 수 있습니다.값을 제어하는 경우 값도 설정해야 합니다.그렇지 않은 경우 값을 설정하지 않고 onChange 이벤트를 처리하여 사용자 작업에 응답합니다. value와 defaultValue는 옵션 값과 일치해야 합니다.자리 표시자를 설정하고 기본값을 선택하지 않으려는 경우 이 옵션을 사용할 수 있습니다. <defaultValue={' 선택>디폴트'} ><옵션값="DEFAULT" 비활성화>인사말 선택...</옵션><option value="1"> 미스터 </option><option value="2">부인 </option><option value="3"> Ms </option><option value="4"> 미적용 </option><option value="5"> DR </option></select> 여기서 사용자는 옵션을 선택해야 합니다. 편집 제어된 구성 요소인 경우 이 경우 defaultValue와 value violating react를 모두 사용해야 합니다.이는 의미론에 의한 반응에서는 디세이블 값을 활성화로 설정할 수 없기 때문입니다. The Select Component(props) 기능{currentValue = propos.curntValue || "DEFAULT";되돌아가다< select value = { currentValue } defaultValue = { '디폴트'} onChange={props.onChange}<옵션값="DEFAULT" 비활성화>인사말 선택...</옵션><option value="1"> 미스터 </option><option value="2">부인 </option><option value="3"> Ms </option><option value="4"> 미적용 </option><option value="5"> DR </option></select>)}<select> 태그에서 선택한 Atribut을 컨스트럭터에서 설정한 this.state의 Atribut으로 할 수 있습니다.이렇게 하면 설정한 초기값(기본값)과 드롭다운이 변경되면 상태를 변경해야 합니다. 컨스트럭터(){this.state = {selectedId: selectedOptionId}} 드롭다운 변경됨(e){this.setState({selectedId: e.target.value}); } 렌더(){되돌아가다<select value={이것.selectedId} onChange={this.dropdownChanged.bind(이것)}>{option_id.map(ID =><option key={id} value={id}>{interface[id].name}<옵션>)}</select>);}모두 감사합니다!동료와 저는 방금 default_value 속성이 변수가 아닌 상수라는 것을 발견했습니다. 작성한 다른 React 양식에서는 Select의 기본값이 관련 컨텍스트에 미리 설정되어 있었습니다.따라서 Select가 처음 렌더링되었을 때 default_value는 올바른 값으로 설정되었습니다. 그러나 최신 React 폼(작은 모달)에서는 폼의 값을 소품으로 전달하고 useEffect를 사용하여 관련 Context를 채웁니다.따라서 Select가 처음 렌더링될 때 default_value는 null로 설정됩니다.그런 다음 콘텍스트가 채워지고 Select가 다시 렌더링되어야 하는 경우 default_value를 변경할 수 없으므로 초기 기본값은 설정되지 않습니다. 솔루션은 결국 다음과 같이 단순했습니다.대신 값 속성을 사용하십시오.그러나 default_value가 다른 폼과 달리 작동하지 않는 이유를 알아내는 데 시간이 걸렸습니다. 커뮤니티에 있는 다른 사람들을 돕기 위해 글을 올립니다.defaultValue와 onChange를 다음과 같이 사용합니다.const [myValue, setMyValue] = useState(''); < onChange={(e) => setMyValue(e.target.value)} defaultValue={props.myprop}> <옵션>옵션 1 </option><옵션>옵션 2 </option><옵션>옵션 3 </option> </select> 예: https://codesandbox.io/s/priceless-lamarr-fetpr?file=/src/App.js후크 및 useState 포함기본값을 선택하려면 defaultValue를 사용합니다. const statusOptions = [{ 값: 1, 라벨: '게시'},{ 값: 0, 레이블: '게시 취소'}];const [statusValue, setStatusValue]= useState('');const handleStatusChange = e = > {set Status Value(e.value); } 되돌아가다<< 고객명 >>님<옵션 선택={statusOptions}defaultValue={{값: 게시됨, 레이블: 게시됨 == 1? '게시됨': '게시 취소'}}}onChange={handleStatusChange}value={statusOptions.find(obj=>obj.value===statusValue)} 필수 /></>)옵션에서 선택하지 않고 값을 설정할 수 있는 간단한 솔루션,다음의 순서에 따릅니다.기본값은 0(사용 중인 값으로 간주하지 않음)으로 x-column으로 설정합니다.이미지 참조4단계 x 열의 "IntialValue"를 0으로 설정합니다.[selected]에 사용된 것과 동일한 문자열을 사용하여 if 조건을 지정하고 여기에 설정한 후 찾으면 "values.x-column = 0"을 표시합니다.태그 4의 "선택" 항목 및 기타 항목 세트(있는 경우)를 제거합니다.마지막으로 이 조건을 설정합니다. [ now navigate ]컬럼의 값은 스텝2에서 마킹된 값으로 디폴트로 설정되어 있습니다.시도해 본 결과, 효과가 있습니다.작은 수정..그림에서 45행..열을 column_value_id로 읽습니다. 콘솔 오류를 피하기 위해 다른 옵션을 시도했습니다. 다음 옵션은 콘솔에서 오류 없이 선택한 옵션과 함께 작동합니다.{const [myValue, setMyValue] = useState('');const changeHandler = (e) = > {set My Value(예: target.value); };<select id="select" value={myValue} onChange={changeHandler}>{!myValue&<option value=">목록에서 선택</option>}{elementsAr.map((el) => {반환(<옵션 키={el.id}값={el.name}>{el.name} </옵션>);})</select>}언급URL : https://stackoverflow.com/questions/44786669/warning-use-the-defaultvalue-or-value-props-on-select-instead-of-setting