Question

这是一个简化的场景。

我有一个带有必填输入字段和按钮的表格。该按钮具有onClick React处理函数，类型为“按钮”。我希望浏览器检查HTML字段并进行一些初始验证（例如，如果不涉及React且按钮的类型为“提交”，它将执行此操作）。我想我应该在处理程序函数中执行某些操作，但是我不确定该做什么。

我尝试过的一些事情：

更改按钮以键入“ submit”确实会执行检查，但还会调用处理程序，该处理程序不知道检查是成功还是失败
相反，在表单上添加处理程序是可行的，但是由于我有很多按钮，因此使实际示例更难以维护

谢谢

<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/

Answer 1

表单似乎具有checkValidity()和reportValidity() API。答案就变成了

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"))

Answer 2

您需要为输入值创建状态

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

然后

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

并检查您想要的“处理程序”功能。

handle(event) {
  if (inputValue.length > 0) //do what you want...
}

Answer 3

以下是工作示例，它是从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"))

在React Button单击上执行HTML输入验证

3 个答案: