Привет. Я пытаюсь вызвать метод от родительского компонента к дочернему.
Я исследовал много, но не нашел хорошего решения с дочерним (функциональный компонент).если есть решение, может кто-нибудь объяснить мне, чтобы решить это.
APP.js
import React from 'react';
import IntegrationDownshift from './members'
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
Name: "Name from state...",
Description: "Description from state...",
Data:[data]
}
}
Clear(){
this.IntegrationDownshift.ClearRecord(); // Here I'm trying to call the method on such event
}
render() {
return (
<div>
<IntegrationDownshift Members={this.state.Data}/>
<Button variant="contained" color="secondary" onClick={this.Clear.bind(this)} > // when i click the button it will trigger
clear // when i click the button it will trigger
</Button>
</div>
);
}
}
export default App;`
членов
var suggestions = []
var members=[];
function renderInput(inputProps) {
const { InputProps, classes, ref, ...other } = inputProps;
return (
<TextField
InputProps={{
inputRef: ref,
classes: {
root: classes.inputRoot,
input: classes.inputInput,
},
...InputProps,
}}
{...other}
/>
);
}
function renderSuggestion(suggestionProps) {
const { suggestion, index, itemProps, highlightedIndex, selectedItem } = suggestionProps;
const isHighlighted = highlightedIndex === index;
const isSelected = (selectedItem || '').indexOf(suggestion.label) > -1;
return (
<MenuItem
{...itemProps}
key={suggestion.label}
selected={isHighlighted}
component="div"
style={{
fontWeight: isSelected ? 500 : 400,
}}
>
{suggestion.label}
</MenuItem>
);
}
renderSuggestion.propTypes = {
highlightedIndex: PropTypes.number,
index: PropTypes.number,
itemProps: PropTypes.object,
selectedItem: PropTypes.string,
suggestion: PropTypes.shape({ label: PropTypes.string }).isRequired,
};
function getSuggestions(value, { showEmpty = false } = {}) {
const inputValue = deburr(value.trim()).toLowerCase();
const inputLength = inputValue.length;
let count = 0;
return inputLength === 0 && !showEmpty
? []
: suggestions.filter(suggestion => {
const keep =
count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
if (keep) {
count += 1;
}
return keep;
});
}
function DownshiftMultiple(props) {
suggestions=props.Members;
const { classes } = props;
const [inputValue, setInputValue] = React.useState('');
const [selectedItem, setSelectedItem] = React.useState([]);
function handleKeyDown(event) {
if (selectedItem.length && !inputValue.length && event.key === 'Backspace') {
setSelectedItem(selectedItem.slice(0, selectedItem.length - 1));
}
}
function ClearRecord(){ // ** trying to call this function **
setSelectedItem(selectedItem.slice(0, selectedItem.length - selectedItem.length));
}
function handleInputChange(event) {
setInputValue(event.target.value);
}
function handleChange(item) {
let newSelectedItem = [...selectedItem];
if (newSelectedItem.indexOf(item) === -1) {
newSelectedItem = [...newSelectedItem, item];
members=newSelectedItem; // **want to send this**
props.onDataChanged(members)// **here i'm trying to send the value**
}
setInputValue('');
setSelectedItem(newSelectedItem);
}
const handleDelete = item => () => {
const newSelectedItem = [...selectedItem];
newSelectedItem.splice(newSelectedItem.indexOf(item), 1);
setSelectedItem(newSelectedItem);
};
return (
<Downshift
id="downshift-multiple"
inputValue={inputValue}
onChange={handleChange}
selectedItem={selectedItem}
>
{({
getInputProps,
getItemProps,
getLabelProps,
isOpen,
inputValue: inputValue2,
selectedItem: selectedItem2,
highlightedIndex,
}) => {
const { onBlur, onChange, onFocus, ...inputProps } = getInputProps({
onKeyDown: handleKeyDown,
placeholder: 'Select multiple Members',
});
return (
<div className={classes.container}>
{renderInput({
fullWidth: true,
classes,
InputLabelProps: getLabelProps(),
InputProps: {
startAdornment: selectedItem.map(item => (
<Chip
key={item}
tabIndex={-1}
label={item}
className={classes.chip}
onDelete={handleDelete(item)}
/>
)),
onBlur,
onChange: event => {
handleInputChange(event);
onChange(event);
},
onFocus,
},
inputProps,
})}
{isOpen ? (
<Paper className={classes.paper} square>
{getSuggestions(inputValue2).map((suggestion, index) =>
renderSuggestion({
suggestion,
index,
itemProps: getItemProps({ item: suggestion.label }),
highlightedIndex,
selectedItem: selectedItem2,
}),
)}
</Paper>
) : null}
</div>
);
}}
</Downshift>
);
}
DownshiftMultiple.propTypes = {
classes: PropTypes.object.isRequired,
};
const useStyles = makeStyles(theme => ({
root: {
flexGrow: 1,
height: 250,
},
container: {
flexGrow: 1,
position: 'relative',
},
paper: {
position: 'absolute',
zIndex: 1,
marginTop: theme.spacing(1),
left: 0,
right: 0,
},
chip: {
margin: theme.spacing(0.5, 0.25),
},
inputRoot: {
flexWrap: 'wrap',
},
inputInput: {
width: 'auto',
flexGrow: 1,
},
divider: {
height: theme.spacing(2),
},
}));
let popperNode;
export default function IntegrationDownshift(props) {
debugger
const classes = useStyles();
const Members=props.Members;
props.onDataChanged("test")
return (
<div className={classes.root}>
<DownshiftMultiple classes={classes} Members={Members} />
</div>
);
}
Я пытаюсь реализовать эту https://codesandbox.io/s/runh6 функциональность, которая является материальным интерфейсом.Я не могу вызвать метод от родителя к ребенку.в этой операции я пытаюсь очистить записи в событии клика app.js.Есть ли способ очистить данные в app.js.