To jest uproszczony scenariusz.

Mam formularz z wymaganym polem wejściowym i przyciskiem. Przycisk ma onClick moduł obsługi reakcji i jest typu „przycisk”. Chcę, aby przeglądarka sprawdziła pola HTML i przeprowadziła wstępną weryfikację (tak jak by to zrobiła, gdyby nie było zaangażowanego Reacta, a przycisk byłby typu „wyślij”). Wyobrażam sobie, że powinienem coś zrobić w funkcji obsługi, ale nie jestem pewien co.

Kilka rzeczy, które wypróbowałem:

  • Zmiana przycisku na „wyślij” powoduje wykonanie sprawdzenia, ale także wywołanie programu obsługi, który nie wie, czy sprawdzenie powiodło się, czy nie.
  • Dodanie programu obsługi do formularza zamiast tego działa, ale sprawia, że prawdziwy przykład jest trudniejszy do utrzymania, ponieważ mam wiele przycisków

Dziękuję Ci

<div id="app"></div>
class MyClass extends React.PureComponent {
    render() {
        return (
            <form action="#">
                <input type="text" required/>
                <button type="button" onClick={e => this.handle(e)}>Press</button>
            </form>
        )
    }

    handle(event) {
        // What should I do here?
    }
}


ReactDOM.render(<MyClass />, document.querySelector("#app"))

https://jsfiddle.net/89wr3ot4/

0
Andrei Cioara 20 grudzień 2019, 07:35

3 odpowiedzi

Wygląda na to, że formularz ma interfejs API checkValidity() i reportValidity(). Wtedy odpowiedź brzmi

class MyClass extends React.PureComponent {
    render() {
        return (
            <form action="#" ref={this.formRef}>
                <input type="text" required/>
                <button type="button" onClick={e => this.handle(e)}>Press</button>
            </form>
        )
    }

    handle(event) {
        const form = this.formRef.current;
        if (!form.checkValidity()) {
            form.reportValidity()
            return
        }
        // Everything else
    }
}


ReactDOM.render(<MyClass />, document.querySelector("#app"))
1
Andrei Cioara 20 grudzień 2019, 07:54

Musisz utworzyć stan dla wartości wejściowej

const [inputValue, setInputValue] = useState(''); //for functional component
const inputHandler = (event) => setInputValue(event.target.value);

Następnie

<input type='text' value={inputValue} onChange={inputHandler} />

I sprawdź w swojej funkcji „handler”, czego chcesz.

handle(event) {
  if (inputValue.length > 0) //do what you want...
}
0
AlexDevTime 20 grudzień 2019, 07:54

Poniżej znajduje się działający przykład, który został zmodyfikowany z powyższego jsfiddle

class MyClass extends React.Component {
    state = { value: '', message: ''}
    render() {
        return (
            <form action="#">
            <input type="text" required value={this.state.value} onChange={e => this.setState({value: e.target.value})} />
                <button type="button" onClick={e => this.handle(e)}>Press</button>
                <p> {this.state.message }</p>
            </form>
        )
    }

    handle(event) {
        // What should I do here?
        const { value } = this.state;
        if (value === '') {
            this.setState({message: 'Invalid!, Please enter valid input'})
        } else {
            this.setState({message: 'Yeah!, Got Valid input'})
        }   
    }
}


ReactDOM.render(<MyClass />, document.querySelector("#app"))
0
Siva K V 20 grudzień 2019, 10:17