将输入标签的值传递给搜索按钮标签 - 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 挂钩。然后，您可以将 onChange 处理程序传递给接收事件的 SearchInput，并根据 event.target.value 更新 SearchBar 状态。然后当你点击提交时，你可以传入你存储在状态中的输入值。

Answer 2

感谢您的帮助！我通过进行以下更改解决了问题:)

In the Search bar component

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

export default SearchBar;

In the Student container

const Students = ({ studentsPayload = [], onClickButton }) => {
    const [value, setValue] = useState('');
    const handleChange = ({ target: { value } }) => setValue(value);
    return (
        <StudentsContainer>
            <SearchBarContainer>
                <SearchBar
                    onClickButton={onClickButton}
                    onValueChange={handleChange}
                    value={value}
                />
            </SearchBarContainer>
            {studentsPayload.length > 0 ? (
                <StudentsCard data={studentsPayload} />
            ) : null}
        </StudentsContainer>
    );
};


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

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

export default enhancer;

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

Passing value of input tag to a search button tag - ReactJS

css

containers

reactjs

styled-components