gpt4 book ai didi

javascript - React : Component with just a form, 表单提交操作因组件的使用者而异

转载 作者:行者123 更新时间:2023-12-01 00:15:53 26 4
gpt4 key购买 nike

我有一个 React 组件,它显示一个简单的搜索表单。我正在使用“受控组件”( https://reactjs.org/docs/forms.html ),以便 React 组件存储搜索条件并且是事实来源。

class SearchForm extends React.Component {    

constructor(props) {
super(props);
this.state = {criteria: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

handleChange(event) {
this.setState({criteria: event.target.value});
}

handleSubmit(event) {
event.preventDefault();
// only submit the search if there is search criteria
if (this.state.criteria.length > 0){
// I need to be able to set some state here
this.setState({
.....
});
// i also need to access this.props here
if (this.props......) ...
}
}

render() {
return (
<form onSubmit={this.handleSubmit} >

<input type="text"
placeholder="Search"
value={this.state.criteria}
onChange={this.handleChange} />

<button ...... />
</form>
);
}
}

我想在 2 个地方使用这个 SearchForm。

  • 标题中的搜索框:当表单提交时,它会重定向到我的应用中的另一个页面
  • 搜索页面上的搜索框:提交表单时,它会更新搜索表单下方的搜索列表

因此,SearchForm 的 onSubmit 方法不能包含执行 onForm 提交的代码,因为此代码将根据 SearchForms 的使用情况而有所不同。

我知道如何在我的组件 HTML 中添加搜索表单,例如在 Component1 的渲染方法中我会有

<div>
<SearchForm />
</div>

但是,我不知道如何针对使用搜索表单的每个组件以不同的方式处理 SearchForms onSubmit。就像我希望 SearchForm 的 onSubmit 调用包含组件中传递 SearchForm 的 state.criteria 值的方法

如何在具有不同表单提交操作的其他组件中重用 SearchForm 组件?

最佳答案

我认为您可以将搜索表单转换为函数组件并将提交处理程序作为 Prop 传递。使用Hooks将是这里的理想选择。


import React, { useState } from "react";

export function SearchForm(props) {
const [search, setInput] = useState('');

const handleSubmit = (evt) => {
evt.preventDefault();
//validation here
props.onSubmit(search)
}
return (
<form onSubmit={this.handleSubmit}>
<input
type="text"
placeholder="Search"
value={search}
onChange={(event) => setInput(event.target.value)}
/>

<button/>
</form>;

);
}

然后您可以在组件中使用此搜索表单以及所需的提交操作,例如。

import React, { Component } from 'react'
import { Text, View } from 'react-native'

import React, { Component } from 'react'

export default class Header extends Component {

constructor(props){
super(props)
this.state = {whatever: ''}
this.onSearch = this.onSearch.bind(this)
}

onSearch(value){
//you logic to navigate or display searched items
}
render() {
return (
<div>
<SearchForm onSubmit={this.onSearch}>
</div>
)
}
}


希望这有帮助。

关于javascript - React : Component with just a form, 表单提交操作因组件的使用者而异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59771401/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com