css - 将输入标签的值传递给搜索按钮标签 - ReactJS

Question

关于如何解决这个问题的任何意见......

我的目标是让用户在搜索栏中搜索“Jane Smith”，单击搜索按钮并显示包含“Jane Smith”的卡片

目前我所拥有的，用户搜索“Jane Smith”，它被保存为“term”，一旦用户点击搜索按钮，“fetchStudents”功能失败，说它没有“term”

我无法将“term”值从 SearchBarInput 标记传递到 SearchBarButton 标记，因此在学生容器中我可以在 mapDispatchToProps 函数中使用它。

My searchBar component consists of

const SearchBar = ({ onClick, value }) => (
    <SearchBarWrapper>
        <div>
            <FontAwesomeIcon icon="search" className="searchIcon" />
            <SearchBarInput
                name="searchBarInput"
                placeholder=" Search for something..."
                label="searchBar"
                defaultValue={value}
            />
            <SearchBarButton onClick={onClick}>Search</SearchBarButton>
        </div>
    </SearchBarWrapper>
    );

    export default SearchBar;

In my student container I have

const Students = ({ studentsPayload = [], onClick }) => (
    <StudentsContainer>
        <SearchBarContainer>
            <SearchBar onClick={onClick} />
        </SearchBarContainer>
        {studentsPayload.length > 0 ? (
            <StudentsCard data={studentsPayload} />
        ) : null}
    </StudentsContainer>
);



const mapDispatchToProps = dispatch => ({ onClick: ({ target: { value } }) => dispatch(fetchStudents(value)) });


const mapStateToProps = ({ students: { studentsPayload } }) => ({ studentsPayload });
/**
 * Connects component to redux store
 */
const enhancer = connect(
    mapStateToProps,
    mapDispatchToProps,
)(StudentSearch);

export default enhancer;

My fetchStudents in actions looks like this

export const fetchStudents = term => async dispatch => {
        try {
            const { data: { items } } = await fetchData(
            `${process.env.REACT_APP_STUDENTS_URLP1}${term}${process.env.REACT_APP_STUDENTS_URLP2}`);
            dispatch({ type: FETCH_STUDENTS, studentsPayload: items });
        } catch (error) {
            throw new Error(error);
        }
    }; 

提前致谢!

Answer 1

您可以将 SearchBar 组件转换为使用 useState Hook 。然后，您可以将 onChange 处理程序传递给您的 SearchInput，该处理程序接收事件并根据 事件更新 SearchBar 状态。目标值。然后，当您点击提交时，您可以传入存储在状态中的输入值。