react.js-동적으로 생성 된 버튼에서 성공에 요소를 추가하는 방법은 무엇입니까?

Mesmerize86

텍스트 필드와 버튼으로 동적으로 생성 된 구성 요소가 있습니다. 각 버튼은 ajax 요청을 수행합니다. 모두 잘 작동합니다. 그러나 버튼 자체에 성공 메시지 또는 오류 메시지를 표시하고 일부 아이콘을 추가하고 싶습니다. 이것이 내가 갇힌 곳입니다. 플래그를 설정하고 상태를 변경했지만 예상대로 모든 버튼에서 변경됩니다. 또한 현재 대상을 변경하려고 시도했지만 성공 콜백에서 참조가 작동하지 않았습니다. 누군가 이것을 도와주세요.

    const FormGroup = ({index, type, field, value, onChange, spinner, isLoading, error, buttonType, brandList, handleBrandConfiguration, checkAvailability, handleCaseType, options, handlerRemoveItem})=> {
  return(
    <div>
      <div className="form-group">
        <label>{index}</label>
        <input type="text"
          name={field}
          className="form-control"
          value={value}
          onChange={onChange}
          />
          <select className="form-control" defaultValue="" onChange={handleBrandConfiguration}>
            <option value="">Please select brand</option>
            {brandList}
          </select>
        <select className="form-control" defaultValue="" onChange={handleCaseType}>
          <option value="">Please select case template</option>
          {options}
        </select>
        <button
          type={buttonType}
          className={classname(isLoading ? error ? "button button-danger" : "button button-success" : error ? "button button-danger" : "button button-primary")}
          onClick={checkAvailability}>
          <i className={classname(spinner ? error ? '': "fa fa-spinner fa-spin": '')}></i> {isLoading ? error ? 'Not Found' :<i className="fa fa-check fa-2" aria-hidden="true"></i> : error ? 'Not Found': 'Check Availability'}</button>
        <input
          type="button"
          className="button button-danger"
          value="Remove Item"
          onClick={handlerRemoveItem}/>
        </div>
      </div>
  );
};

감사

베니 게넬

당신이 이동하는 경우 checkAvailability에 API를 요청하고 결과를 FormControl구성 요소는 단일 구성 요소에 대한 오류와 성공을 설정할 수 있습니다.

예를 들면 :

class FormGroup extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      availabilityResult: null
    };
  }
  callApi(username){
    return(axios.get('https://api.github.com/users/' + username));
  }
  onChange(e){
    this.setState({
      itemCode: e.target.value
    });
  }

  checkAvailability(e){
    const username = this.state.itemCode;
    let currentValue = e.currentTarget.value;
    //ajax call goes here
    this.callApi(username).then(response => {
      const login = response.data.login;
      this.setState({
        availabilityResult: (login === 'mesmerize86')
      });
    }).catch(err => {
      console.log(err);
    });
  }

  render() {
    const {index, field, value, handleRemoveItem} = this.props;
    let inputState = '';
    if (this.state.availabilityResult === true) inputState = 'button-success';
    else if (this.state.availabilityResult === false) inputState = 'button-danger';

    return(
      <div className="form form-inline">
        <div className="form-group">
          <label>{index}</label>
          <input type="text"
            name={field}
            className="form-control"
            value={value}
            onChange={this.onChange.bind(this)}
          />
          <input
            type="button"
            className={`button button-primary ${inputState}`}
            value="Check Availability"
            onClick={this.checkAvailability.bind(this)} />
            <input
              type="button"
              className="button button-danger"
              value="Remove Item"/>
            </div>
          </div>
        )    
      }
    }


    class Main extends React.Component {
      constructor(props){
        super(props);
        this.state = {
          rowList : [],
          itemCodes: [],
          itemCode: ''
        }
      }
      handlerAddRow(){
        const rowList = this.state.rowList.concat(FormGroup);
        this.setState({ rowList });
      }      
      handleRemoveItem(){
        console.log('remove Item');
      }      
      render(){
        const rowList = this.state.rowList.map((row, index) => {
          return (<FormGroup key={index} index={index+1} field={`"itemCode_"${index}`} />);
        });

        return(
          <div className="container">
            <input type="button" value="Add a row" className="button button-primary" onClick={this.handlerAddRow.bind(this)} />    <i class="fa fa-spinner" aria-hidden="true"></i>
            {rowList}
          </div>
        );
      }
    }

    ReactDOM.render(<Main />, document.getElementById('app'));

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

동적으로 생성 된 요소 (LI)에 ondragstart =“drag (event)”를 추가하는 방법은 무엇입니까?

분류에서Dev

jQuery 동적으로 생성 된 div에서 동적으로 생성 된 요소를 추가 / 제거하는 방법은 무엇입니까?

분류에서Dev

Java에서 동적으로 생성 된 요소를 다시 호출하는 방법은 무엇입니까?

분류에서Dev

프로토 타입 내에서 동적으로 생성 된 요소에 이벤트 리스너를 추가하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 div 안에 이미지를 추가하는 방법은 무엇입니까?

분류에서Dev

버튼으로 생성 된 객체를 테이블에 추가하는 방법은 무엇입니까?

분류에서Dev

Javascript / jquery에서 동적으로 생성 된 div 요소에 액세스하는 방법은 무엇입니까?

분류에서Dev

React : 다른 유형의 자식 구성 요소를 부모 구성 요소에 동적으로 추가하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 목록에서 버튼으로 텍스트를 변경하는 방법은 무엇입니까?

분류에서Dev

Delphi / FMX : 위에서 두 번째 대신 이전에 추가 된 모든 상단 정렬 구성 요소 아래에 동적으로 생성 된 상단 정렬 구성 요소를 추가하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 요소의 ID를 추출하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 클래스와 ID가있는 요소를 동시에 선택하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 입력에서 양식 데이터를 POST하는 방법은 무엇입니까?

분류에서Dev

동적으로 추가 된 이미지에서 imagepicker.js를 사용하는 방법은 무엇입니까?

분류에서Dev

div (React.JS) 내에서 구성 요소를 수직으로 스택하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 두 요소를 span으로 래핑하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 두 요소를 span으로 래핑하는 방법은 무엇입니까?

분류에서Dev

TextView Array에서 동적으로 생성 된 textview를 별도로 처리하는 방법은 무엇입니까?

분류에서Dev

React, 문자열 내부에 동적으로 구성 요소를 만드는 방법은 무엇입니까?

분류에서Dev

Selenium에서 동적으로 생성 된 페이지에서 HTML 요소를 가져 오는 방법은 무엇입니까?

분류에서Dev

활성으로 전환 된 요소를 배열에 추가하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 각 버튼에 대해 다른 onclick 메소드를 참조하는 방법은 무엇입니까?

분류에서Dev

QWebView에서 동적으로 생성 된 이미지를 표시하는 방법은 무엇입니까?

분류에서Dev

window.location.href에서 동적으로 생성 된 ID를 사용하는 방법은 무엇입니까?

분류에서Dev

div 수준에서 동적으로 생성 된 필드를 제거하는 방법은 무엇입니까?

분류에서Dev

조건문에서 동적으로 생성 된 JavaScript 객체를 사용하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 탐색 탭에 값을 추가하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 값을 NumPy 배열에 추가하는 방법은 무엇입니까?

분류에서Dev

동적으로 생성 된 더 깊은 요소를 선택하는 방법은 무엇입니까?

Related 관련 기사

  1. 1

    동적으로 생성 된 요소 (LI)에 ondragstart =“drag (event)”를 추가하는 방법은 무엇입니까?

  2. 2

    jQuery 동적으로 생성 된 div에서 동적으로 생성 된 요소를 추가 / 제거하는 방법은 무엇입니까?

  3. 3

    Java에서 동적으로 생성 된 요소를 다시 호출하는 방법은 무엇입니까?

  4. 4

    프로토 타입 내에서 동적으로 생성 된 요소에 이벤트 리스너를 추가하는 방법은 무엇입니까?

  5. 5

    동적으로 생성 된 div 안에 이미지를 추가하는 방법은 무엇입니까?

  6. 6

    버튼으로 생성 된 객체를 테이블에 추가하는 방법은 무엇입니까?

  7. 7

    Javascript / jquery에서 동적으로 생성 된 div 요소에 액세스하는 방법은 무엇입니까?

  8. 8

    React : 다른 유형의 자식 구성 요소를 부모 구성 요소에 동적으로 추가하는 방법은 무엇입니까?

  9. 9

    동적으로 생성 된 목록에서 버튼으로 텍스트를 변경하는 방법은 무엇입니까?

  10. 10

    Delphi / FMX : 위에서 두 번째 대신 이전에 추가 된 모든 상단 정렬 구성 요소 아래에 동적으로 생성 된 상단 정렬 구성 요소를 추가하는 방법은 무엇입니까?

  11. 11

    동적으로 생성 된 요소의 ID를 추출하는 방법은 무엇입니까?

  12. 12

    동적으로 생성 된 클래스와 ID가있는 요소를 동시에 선택하는 방법은 무엇입니까?

  13. 13

    동적으로 생성 된 입력에서 양식 데이터를 POST하는 방법은 무엇입니까?

  14. 14

    동적으로 추가 된 이미지에서 imagepicker.js를 사용하는 방법은 무엇입니까?

  15. 15

    div (React.JS) 내에서 구성 요소를 수직으로 스택하는 방법은 무엇입니까?

  16. 16

    동적으로 생성 된 두 요소를 span으로 래핑하는 방법은 무엇입니까?

  17. 17

    동적으로 생성 된 두 요소를 span으로 래핑하는 방법은 무엇입니까?

  18. 18

    TextView Array에서 동적으로 생성 된 textview를 별도로 처리하는 방법은 무엇입니까?

  19. 19

    React, 문자열 내부에 동적으로 구성 요소를 만드는 방법은 무엇입니까?

  20. 20

    Selenium에서 동적으로 생성 된 페이지에서 HTML 요소를 가져 오는 방법은 무엇입니까?

  21. 21

    활성으로 전환 된 요소를 배열에 추가하는 방법은 무엇입니까?

  22. 22

    동적으로 생성 된 각 버튼에 대해 다른 onclick 메소드를 참조하는 방법은 무엇입니까?

  23. 23

    QWebView에서 동적으로 생성 된 이미지를 표시하는 방법은 무엇입니까?

  24. 24

    window.location.href에서 동적으로 생성 된 ID를 사용하는 방법은 무엇입니까?

  25. 25

    div 수준에서 동적으로 생성 된 필드를 제거하는 방법은 무엇입니까?

  26. 26

    조건문에서 동적으로 생성 된 JavaScript 객체를 사용하는 방법은 무엇입니까?

  27. 27

    동적으로 생성 된 탐색 탭에 값을 추가하는 방법은 무엇입니까?

  28. 28

    동적으로 생성 된 값을 NumPy 배열에 추가하는 방법은 무엇입니까?

  29. 29

    동적으로 생성 된 더 깊은 요소를 선택하는 방법은 무엇입니까?

뜨겁다태그

보관