ReactDOM Ref children (모범 사례)의 값 재설정

Question

FlexibleInput이라는 상태 비 저장 구성 요소가 있습니다.

import React, { PropTypes } from 'react' 

export default function FlexibleInput({ 
    id, 
    label, 
    defaultValue, 
    type, 
    onChange, 
}){ 
    let fieldClass = `${id}-field` 
    return (
    <fieldset className={fieldClass}> 
     <label htmlFor={id}>{label}</label> 
     <input 
     key={id} 
     id={id} 
     type={type} 
     defaultValue={defaultValue} 
     onChange={onChange} 
     /> 
    </fieldset> 
) 
} 

FlexibleInput.propTypes = { 
    id: PropTypes.string.isRequired, 
    label: PropTypes.string.isRequired, 
    defaultValue: PropTypes.string.isRequired, 
    type: PropTypes.string.isRequired, // accepts "text", "password" atm. 
    onChange: PropTypes.func.isRequired, 
} 

이 FlexibleInput은 AddNote라는 양식으로 사용됩니다.

<form 
    className="note-list__add-note" 
    onSubmit={this.addNote} 
    ref={`${this.props.type}-addNoteForm`} 
    > 
    <FlexibleInput 
    id="note" 
    label="Awaiting changes..." 
    type="text" 
    defaultValue="" 
    onChange={(e) => this.setState({ content: e.target.value })} 
    /> 

this.addNote 기능을 이용하여 제출 후 ... I는 FlexibleInput 입력 값을 재설정 할 수 있도록하려는 것이다. 나는 못생긴 엉덩이 해킹 버전을 관리했습니다

... 제대로 값을 재설정 관리

this.refs[`${this.props.type}-addNoteForm`] 
    .childNodes[0].childNodes[1].value = '' 

. 아마도 FlexibleInput의 구조가 변경 될 수 있기 때문에 변경되기 쉽습니다. 나는 잘 모르겠다.

하지만 내 주요 질문은, 내가

this.refs[bla bla].find(#input)

정도의 정렬을 할 수있는 방법은 무엇입니까?

ref에 대해 api를 사용할 수 있는지 여부는 React/ReactDOM 문서에서 분명하지 않습니다.

감사합니다.

addNote() { 
    this.setState({ content: '' }); 
} 

:

<form 
    className="note-list__add-note" 
    onSubmit={this.addNote} 
    ref={`${this.props.type}-addNoteForm`} 
    > 
    <FlexibleInput 
    id="note" 
    label="Awaiting changes..." 
    type="text" 
    defaultValue="" 
    value={this.state.content} 
    onChange={(e) => this.setState({ content: e.target.value })} 
    /> 

그럼 그냥 this.addNote 방법 내에서 콘텐츠 값을 다시 설정해야 : 입력의 값이 구성 요소의 상태를 사용하여 설정된다

Answer 1

당신은 Controlled component을 만들 수 있습니다 NB this.setState가 올바르게 참조되도록 addNote를 올바르게 바인드하십시오.