W poniższym kodzie pole TextField „Nazwa dostawcy” jest ustawione na wszystkie wielkie litery. Gdybym chciał dodać to do pola tekstowego "Komentarze", wiem, że mogę po prostu dodać więcej zdarzeń handleChange i nazwać je inaczej. Czy istnieje sposób użycia tego samego zdarzenia handleChange dla wielu pól TextField, ponieważ chcę zrobić dokładnie to samo?

import * as React from "react";
import { TextField} from 'office-ui-fabric-react/lib/TextField';
export interface StackOverflowState {
    value: string;
  }
  export default class StackOverflow extends React.Component<{}, StackOverflowState> {
    public state: StackOverflowState = { value: '' };
    render() {
      this.handleChange = this.handleChange.bind(this);
      ;

      return (
        <div className="ms-welcome">
            <TextField 
                label="Supplier Name"
                styles={{ root: { width: 150 } }}
                onChange={this.handleChange.bind(this)}
                value={this.state.value}
            />
            <TextField 
                label="Comments"
                styles={{ root: { width: 300 } }}
            />
        </div>
      );
    }
    handleChange(event) {
      this.setState({value: event.target.value.toUpperCase()});
    }
  }
0
Ethan 2 kwiecień 2020, 16:56

4 odpowiedzi

Najlepsza odpowiedź

Kilka uwag:

  • nie używaj .bind(this) wewnątrz render (), opcjonalnie użyj funkcji strzałki.
  • użyj constructor() do zainicjowania stanu klasycznego komponentu.
  • wspólna funkcja obsługi z indeksem identyfikacyjnym została przekazana jako parametr.
  • użyj [key: string]: State[keyof State], aby umożliwić wybieranie atrybutu za pomocą ciągu znaków.

Ponadto możemy:

  • użyj tablicy stanów
  • użyj lokalnego HOC, aby uniknąć powtarzania się w indeksie
  • użyj Array do wygenerowania renderowanych elementów
import * as React from "react";
import { TextField } from "office-ui-fabric-react/lib/TextField";

export interface State {
  [key: string]: State[keyof State];
  inputA: string;
  inputB: string;
}
export default class App extends React.Component<{}, State> {
  constructor(props: {}) {
    super(props);
    this.state = {
      inputA: "",
      inputB: ""
    };
  }
  handleChange = (field: string) => (event: any) => {
    const value = event.target.value.toUpperCase();
    this.setState({ [field]: value });
  };
  render() {
    console.log(this.state);
    return (
      <div className="ms-welcome">
        <TextField
          label="Supplier Name"
          styles={{ root: { width: 150 } }}
          onChange={this.handleChange("inputA")}
          value={this.state["inputA"]}
        />
        <TextField
          label="Comments"
          styles={{ root: { width: 300 } }}
          onChange={this.handleChange("inputB")}
          value={this.state["inputB"]}
        />
      </div>
    );
  }
}

Edit peaceful-mestorf-xbj6x

2
keikai 2 kwiecień 2020, 14:24

Możesz użyć obiektu jako stanu zawierającego klucze jako nazwy pól i wartości względem odpowiednich nazw pól

state = { values : {} };

onChange = (name, e) => {
   this.setState(state => ({ values: { ...state.values, [name]: e.target.value } }));

  // If e.target.name contains field name, no need to add extra name parameter in this method, you can use that as name

}

     <TextField 
            label="Supplier Name"
            styles={{ root: { width: 150 } }}
            onChange={e => this.handleChange('supplierName', e)}
            value={this.state.values.supplierName}
        />
 <TextField 
            label="Comments"
            styles={{ root: { width: 300 } }}
            onChange={e => this.handleChange('comments', e)}
            value={this.state.values.comments}
        />
1
Zohaib Ijaz 2 kwiecień 2020, 14:02

Aby obsłużyć wiele danych wejściowych za pomocą jednej procedury obsługi zdarzeń. Musisz nadać unikalne nazwy wartościom wejściowym i możesz zapisać zmianę uchwytu w oparciu o unikalne nazwy.

<div className="ms-welcome">
        <TextField 
            name="input1"
            onChange={this.handleChange.bind(this)}
            value={this.state.value}
        />
        <TextField 
            name="input2"
            onChange={this.handleChange.bind(this)}
            value={this.state.value}
        />
    </div>

Teraz możesz po prostu napisać zmianę uchwytu na podstawie unikalnych nazw zastosowanych do pól wejściowych

HandleChange (e) {
 this.setState({[e.target.name]: e.target.value})
}

Gdy zdarzenie pochodzi z pierwszego wejścia e.target.name będzie input1, a gdy zdarzenie pochodzi z drugiego wejścia e.target.name będzie input2.

1
Zohaib 2 kwiecień 2020, 14:12

Spróbuj użyć wiązania trochę więcej :)

import * as React from "react";
import { TextField} from 'office-ui-fabric-react/lib/TextField';
export interface StackOverflowState {
    value: string;
    comments: string;
  }
  export default class StackOverflow extends React.Component<{}, StackOverflowState> {
    public state: StackOverflowState = { value: '', comments: '' };

    private const handleChange = (stateField: keyof StackOverflowState) => (event) {
      this.setState({ [stateField]: event.target.value.toUpperCase()});
    }

    render() {
      return (
        <div className="ms-welcome">
            <TextField 
                label="Supplier Name"
                styles={{ root: { width: 150 } }}
                onChange={this.handleChange('value')}
                value={this.state.value}
            />
            <TextField 
                label="Comments"
                onChange={this.handleChange.('comments')}
                styles={{ root: { width: 300 } }}
            />
        </div>
      );
    }
  }

1
Mor Shemesh 2 kwiecień 2020, 14:28