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

Posted 2023-01-20

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

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

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

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

我的searchBar组件包含

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;

在我的学生容器中，我有

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;

我在行动中的fetchStudents看起来像这样

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

提前致谢！

答案

你可以转换SearchBar组件来使用useState钩子。然后你可以将onChange处理程序传递给你接收事件的SearchInput并根据SearchBar更新event.target.value状态。然后，当您点击提交时，您可以传入您在状态中存储的输入值。

另一答案

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

在搜索栏组件中

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;

在学生容器中

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;