부모의 상태를 기반으로 ReactJS 입력의 상태를 수동으로 변경합니다.

Question

ReactJS의 입력 값을 수동으로 지우려고합니다. 지금은 필드의 값을 업데이 트하여 부모 애플 리케이션의 상태를 업데이 트하고 부모 애플 리케이션의 상태가 "Enter"키를 누르면 재설정되므로 설정을 가지고 있지만 일치하도록 값을 지울 입력을 얻을 수 없습니다 부모 앱의 상태.

나는 이제 막 시작 했으므로 코드에 많은 문제가 있다는 것을 확신합니다. 제공 할 수있는 도움에 감사드립니다.

class AddNote extends Component { 
    componentWillUpdate() { 
    console.log(store.getState().searchHandler.searchTerm); 
    this.state = {searchTerm: store.getState().searchHandler.searchTerm}; 
    } 
    constructor() { 
    super(); 
    this.state = { 
     searchTerm: undefined 
    } 
    } 
    render() { 
    const { 
     onAddClick, 
     onSearchUpdate, 
     searchHandler, 
    } = this.props; 
    let searchTermInput; 
    return (
    <div> 
     <input 
     ref={node => { 
      searchTermInput = node; 
     }} 
     value={this.state.searchTerm} 
     onChange={this.props.onChange.bind(this)} 
     onKeyPress={(e) => { 
      let searchTermToPass = searchTermInput.value; 
      onAddClick(e, searchTermToPass); 
     }} 
     /> 
    </div> 
    ); 
    } 

class RecollectApp extends Component { 
    componentWillUpdate() { 
    console.log("We're updating!"); 
    } 
    render() { 
    const { 
     notes, 
     searchHandler, 
    } = this.props; 
    return (
     <div> 
     <AddNote 
      onAddClick={(e, searchTerm) => { 
      if (e.charCode === 13) { 
       store.dispatch({ 
       type: 'ADD_NOTE', 
       id: nextNoteID++, 
       title: searchTerm, 
       }); 
       store.dispatch({ 
       type: 'RESET_STATE', 
       }); 
      } 
      } 
      } 
      onChange={(e) => { 
      store.dispatch({ 
       type: 'UPDATE_STATE', 
       searchTerm: e.target.value, 
      }); 
      this.value = ""; 
      }} 

     /> 
     <NoteList 
      notes={notes} 
      onNoteClick={id => 
      store.dispatch({ 
       type: 'SELECT_NOTE', 
       id, 
      }) 
      } 
     /> 
     </div> 
    ); 
    } 
} 

Answer 1

AddNote 구성 요소의 입력의 onchange를 같아야합니다

handleChange(e) { 
    this.setState({ searchTerm: e.target.value }); 
    this.props.onChange(e, e.target.value); 
} 

Answer 2

귀하의 문제가 상태가 변경 후 AddNote 구성 요소 다시 쓰게 강요하지 않는 것입니다. 대신 직접 상태를 설정, 당신은 setState 방법을 사용한다 :

내가 알고있는 것처럼

class AddNote extends Component { 
    componentWillUpdate() { 
    this.setState({ 
     searchTerm: store.getState().searchHandler.searchTerm, 
    }); 
    } 
    // Other methods... 
} 

, 당신은 다른 곳 AddNote 구성 요소에서 입력 value를 사용할 필요가 없습니다.
그래서 redux 상태로 저장할 필요가 없습니다.

에 따르면 AddNote 구성 요소는 다음과 같이 구현할 수 있습니다.

// We need to install additional npm module, for serializing form data. 
import serialize from 'form-serialize'; 

// As you don't need local state, you can implement component as pure function. 
function AddNote({ onSubmit }) { 
    let input; 

    function handleSubmit(e) { 
    // Preventing default form behavior. 
    e.preventDefault(); 

    // Serializing formData to javascript object. 
    const formData = serialize(e.target, { 
     hash: true 
    }); 

    // Resetting input value. 
    input.value = ''; 

    onSubmit(formData.title); 
    } 
    // We are using `onSubmit` prop of form element, to add note, instead of determining `enter` keycode. 
    return (
    <form onSubmit={handleSubmit}> 
     <input type="text" name="title" ref={node => input = node} /> 
    </form> 
); 
} 

class RecollectApp extends Component { 
    render() { 
    const { notes } = this.props; 
    return (
     <div> 
     { 
      // Here we are simply dispatching `value` given from `onSbumit` callback. 
     } 
     <AddNote 
      onSubmit={value => store.dispatch({ 
      type: 'ADD_NOTE', 
      // Note, from your provided code `nexNoteID` is undefined. 
      id: nextNoteID++, 
      title: value, 
      })} 
     /> 
     <NoteList 
      notes={notes} 
      onNoteClick={id => 
      store.dispatch({ 
       type: 'SELECT_NOTE', 
       id, 
      }) 
      } 
     /> 
     </div> 
    ); 
    } 
};