Передача значения входного тега в тег кнопки поиска - ReactJS

Question

Любые данные о том, как я могу это исправить ...

Моя цель состоит в том, чтобы пользователь выполнил поиск «Джейн Смит» в строке поиска, нажал кнопку поиска и отобразил карточки, содержащие «Джейн Смит»

В настоящее время с тем, что у меня есть, пользователь ищет «Джейн Смит», которая сохраняется как «термин», и как только пользователь нажимает кнопку поиска, функция «fetchStudents» перестает работать, говоря, что у него нет «термина»

У меня проблемы с передачей значения 'term' из тега SearchBarInput в тег 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);
        }
    }; 

Заранее спасибо!

Answer 1

Спасибо за помощь!Я решил проблему, внеся следующие изменения :)

В компоненте панели поиска

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;

В контейнере Student

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;

Answer 2

Вы можете преобразовать компонент SearchBar, чтобы использовать хук useState.Затем вы можете передать обработчик onChange вашему SearchInput, который принимает событие и обновляет состояние SearchBar на основе значения event.target.value.Затем, когда вы нажмете «Отправить», вы можете передать входное значение, которое вы сохранили в состоянии.