React-tags: 입력 구성 요소에 대한 경고

에 만든 2018년 09월 18일 · 7코멘트 · 출처: i-like-robots/react-tags

ReactTags 사용하여 경고가 표시됩니다.

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.
    in input (created by Input)
    in div (created by Input)
    in Input (created by ReactTags)
    in div (created by ReactTags)
    in div (created by ReactTags)

여기 에 언급된 내용 https://github.com/i-like-robots/react-tags/blob/master/lib/Input.js#L78 을 다음과 같이 변경해야 합니다.
defaultValue={query}

어떻게 생각하나요?
감사 해요!

bug unconfirmed

출처

luciemac

👍13

가장 유용한 댓글

defaultValue로 변경하기 위해 PR을 추가했지만 이 문제가 해결될 때까지 경고를 피하는 해킹을 원하면 ReactTags를 사용하는 클래스에 noop 메서드를 추가하고 이를 구성 요소의 onChange로 참조할 수 있습니다. 보기 흉하지만 경고를 중지합니다.

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

chellman 에 2018년 10월 12일

👍2

모든 7 댓글

동일한 문제가 있습니다. 제안 사항이 있습니까?

gustavohornig 에 2018년 10월 02일

나는 이것을 직접 보지 못해서 두렵습니다. 어떤 React 버전을 사용하고 있는지 알려주실 수 있습니까?

i-like-robots 에 2018년 10월 05일

나는 React 16.3.2를 사용하고 있습니다

luciemac 에 2018년 10월 05일

@i-like-robots 저도 이 문제를 겪고 있습니다.

estherleah 에 2018년 10월 11일

👍2

noOp() {
    // does nothing
}

<ReactTags
tags={this.state.tags}
suggestions={this.state.suggestions}
handleAddition={this.handleTagAddition}
handleDelete={this.handleTagDelete}
inputAttributes={{ onChange: this.noOp }}
/>

chellman 에 2018년 10월 12일

👍2

이것은 흥미로운 문제입니다. 몇 년 전 https://github.com/facebook/react/issues/1118 에서 길게 논의되었습니다(16.3.2를 포함한 모든 버전의 React에서 이 경고를 본 적이 없지만! )

현재 구현에 기술적으로 _잘못된_ 것은 없지만 콘솔을 어지럽히는 경고는 짜증나고 피해야 한다는 데 동의합니다.

defaultValue 설정이 의도하지 않은 결과를 초래할 수 있으므로 올바른 솔루션인지 확신할 수 없습니다(https://github.com/i-like-robots/react-tags/pull/139#issuecomment-431006214 참조). ) 그러나 잠재적으로 몇 가지 다른 해결 방법을 사용할 수 있습니다.

i-like-robots 에 2018년 10월 18일

이것을 좀 더 살펴보면 이 경고에는 5가지 조건이 있음을 알 수 있습니다.

https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/packages/react-dom/src/shared/ReactControlledValuePropTypes.js#L32 -L46

그것은 기본적으로이 _should_가 평가 때문에 이익 나를 첫 번째 조건입니다 true 에 대한 기본 값 때문에 state.query 빈 문자열입니다. 따라서 함수가 조기에 반환되고 경고를 출력하지 않아야 합니다.

따라서 이 경고를 트리거하려면 기본 상태(https://github.com/i-like-robots/react-tags/blob/master/lib/ReactTags.js#L35)를 변경하여 진실한 값으로 만들어야 했습니다.

경험한 사람 중 제가 더 자세히 볼 수 있도록 문제를 보여주는 예가 있습니까?

i-like-robots 에 2018년 10월 18일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

React-tags: 입력 구성 요소에 대한 경고

가장 유용한 댓글

모든 7 댓글

관련 문제