React/Redux, 사용자 입력을 얻는 방법

Question

나는 usage with React Redux 튜토리얼을 따르고 있습니다. 실제로 얻지 못하는 부분은 사용자 입력을 검색하는 방법입니다.

그들은 누구 mapDispatchToProps입니다

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
    onClick:() => { 
     dispatch(setVisibilityFilter(ownProps.filter)) 
    } 
    } 
} 

그래서이 연결된 표상 컴포넌트로 ownProps.filter를 주입 FilterLink 컨테이너를 구축 할 수 있습니다. 우리가 가서이 용기가 어떻게 만들어 졌는지 보았다면

const Footer =() => (
    <p> 
    Show:{" "} 
    <FilterLink filter="SHOW_ALL">All</FilterLink>{", "} 
    <FilterLink filter="SHOW_ACTIVE">Active</FilterLink>{", "} 
    <FilterLink filter="SHOW_COMPLETED">Completed</FilterLink> 
    </p> 
) 

좋아, "필터"속성이있다. 그게 분명해.

이제 동일한 예제에서 텍스트 필터를 만들고 싶습니다. 그래서 일단 여기 내 표현 적 요소

const TodoSearch = ({onSubmit}) => (
    <form 
     onSubmit={e => { 
      e.preventDefault() 
      onSubmit() 
     }} 
    > 
     <input placeholder="Text search" /> 
     <input type="submit" value="Go" /> 
    </form> 
) 

입니다하지만 컨테이너를 작성하는 올 때 사용자 입력을 얻는 방법을 모르는

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSubmit:() => { 
      dispatch(setTextSearch(????)) 
     } 
    } 
} 

그것은 내가의 jQuery $로 할 것 인 무엇인가 (# 텍스트입니다) .val()하지만 ... 최선의 방법입니까?

나중에 동일한 튜토리얼에서 목록에 할 일을 추가하는 약간의 양식을 작성합니다. 자, 그들이 어떻게 입력을 받아들이는지 보러 가자.

let AddTodo = ({ dispatch }) => { 
    let input 

    return (
     <div> 
      <form onSubmit={e => { 
       e.preventDefault() 
       if (!input.value.trim()) { 
        return 
       } 
       dispatch(addTodo(input.value)) 
       input.value = '' 
      }}> 
       <input ref={node => { 
        input = node 
       }} /> 
       <button type="submit"> 
        Add Todo 
       </button> 
      </form> 
     </div> 
    ) 
} 

잠깐, 여기서 마술은? 그들은 그 ref 트릭과 함께 "입력"variabile에 가치를 주입 했습니까? 그 맞습니까? 20 개의 입력 필드가 있다면 20 개의 다른 참조와 함께 20 개의 변수를 사용해야합니까? 어떤 도움에 감사하다

은,이 예제는 당신이 더 같은 구성 요소를 연결 등의 반응-REDUX을하는 전형적인 일을,하기의 반응-REDUX 방법을 이해할 수 있도록 여기에 당신에게

Answer 1

제출 기능을 다음과 같이 변경하십시오. 이 REF에 의해 입력을 얻을 수 있도록 또한

const mapDispatchToProps = (dispatch) => { 
    return { 
     onSubmit: (evt) => { 
      dispatch(setTextSearch(evt.target.querySelector('input').value) 
     } 
    } 
} 

,

const TodoSearch = ({onSubmit}) => (
    <form 
     onSubmit={e => { 
      e.preventDefault() 
      onSubmit(e) 
     }} 
    > 
     <input placeholder="Text search" /> 
     <input type="submit" value="Go" /> 
    </form> 
) 

Answer 2

감사합니다. 입력 상태를 관리하는 방법을 배우는 튜토리얼은 아닙니다.

예를 들어, 속성을 사용하여 <input/> DOM 노드에 input 변수를 할당합니다. 그런 다음이 입력 DOM 노드의 값은 input.value을 통해 액세스 할 수 있습니다.

이들은 내부적으로 상태를 처리하는 구성 요소 인 Uncontrolled Component을 사용합니다. 복잡한 형식을 다룰 필요가 없으며이 특정 구성 요소의 가치가 다른 곳에서 사용되지 않을 때 유용합니다.

하지만이 할 일 항목 텍스트를 예를 들어 서버에 저장해야한다고 가정 해 보겠습니다. 이 입력 값은 이제 다른 곳에서 사용하기위한 것이고,이 경우에는 POST 요청을 처리하는 액션 생성자에서 사용하기위한 것입니다. 이 경우, 형태의 값은 당신의 REDUX 저장소에 포함되어, 당신은 지금 당신이 사용자의 입력을 얻고 싶은 경우에, 당신은 이런 식으로 뭔가를 할 수 Controlled Component

Answer 3

상대하고 :

이 데모를 SearchForm 구성 요소는 입력 필드와 동작을 트리거하는 버튼을 렌더링합니다.

import React, { Component, PropTypes } from 'react' 

export default class SearchForm extends Component { 
    constructor(props) { 
    super(props) 
    this.handleGoClick = this.handleGoClick.bind(this) 
    } 

    getInputValue() { 
    return this.refs.input.value 
    } 

    handleGoClick() { 
    this.props.onChange(this.getInputValue()) 
    } 

    render() { 
    return (
     <div> 
     <input ref='input' /> 
     <button onClick={this.handleGoClick}>Go</button> 
     </div> 
    ) 
    } 
} 

입력 필드가 REF 값을 갖는 것으로 공지.this.refs.input.value으로 현재 값을 검색 할 수 있습니다. 그런 다음 handleGoClick 메소드는이 값을 조치 생성자 (mapDispatchToProps를 통해 구성 요소의 소품으로 전달됨)로 전달합니다.

Answer 4

는 I 입력 값을 얻기 위해 (REF)를 사용 handleSubmit() 메소드는 클래스이다. dispatch 메서드를 사용하려면 mapDispatchToProps()에서 일부 prop를 매핑하면됩니다.

class AddTodo extends Component { 

    handleSubmit(event) { 
     let input = this.refs.input; 
     event.preventDefault(); 
     if (!input.value.trim()) { 
      return 
     } 
     this.props.addTodo(input.value); 
     input.value = '' 
    } 

    render() { 
     return (
      <div> 
       <form onSubmit={this.handleSubmit.bind(this)}> 
        <input ref="input"/> 
        <button type="submit"> 
         Add Todo 
        </button> 
       </form> 
      </div> 
     ); 
    } 

} 

const mapDispatchToProps = (dispatch, ownProps) => { 
    return { 
     addTodo:(text) => { 

      dispatch(addTodo(text)); 
     } 
    } 
}; 

export default connect(null, mapDispatchToProps)(AddTodo);