Блог

У меня есть этот компонент

Я хочу, чтобы кнопка «Сохранить тег» была включена только для обоих TextField и Select имела значения.

Я не могу этого понять. Я пробовал разные способы, такие как:

 disabled={!(ZtagName.length === 0 amp;amp; categoryName.length === 0}
 

Когда одно истинно, а другое ложно, тогда оно возвращается ложным,

Я ищу Javascript об этом, но это трудно сделать, я новичок,

 const styles = theme => ({
    root: {
        backgroundColor: theme.palette.primary.light,
        // textAlign: 'center',
        padding: '10px',
        margin: 'auto',
        display: 'flex',
        justifyContent: 'space-around',
    },
    tagTextField: {
        textAlign: 'left',
        padding: '8px',
        margin: '5px',
        border: 'none',
        borderRadius: '2px',
        fontSize: '12pt',
        // background: 'blue',
    },
    inputBackground: {
        background: 'white',
        color: 'red',
    },
    inputLabel: {
        color: 'red',
    },
    changeNameButton: {
        backgroundColor: theme.palette.primary.main,
        boxShadow: theme.shadows[5],
        border: 'none',
        borderRadius: '2px',
        color: 'white',
        margin: '5px',
        padding: '8px',
        cursor: 'pointer',
        'amp;:hover': {
            cursor: 'pointer',
            backgroundColor: theme.palette.primary.dark,
        },
        'amp;:active': {
            cursor: 'pointer',
            backgroundColor: theme.palette.primary.dark,
        },
        'amp;:disabled': {
            cursor: 'default',
            color: 'gray',
            backgroundColor: theme.palette.primary.main,
        },
    },
});

class AddTag extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tagName: '',
            categoryName: '',
            categoryNames: ['aaaa', 'bbbb', 'cccc', 'dddd', 'fff'],
        };
    }

    submit = () => {
        // let todoListCopy = [...this.state.todoList];
        // todoListCopy.push({
        //  todoName: this.state.todoName,
        //  userName: this.state.userName,
        // });
        // this.setState({
        //  todoName: '',
        //  todoList: todoListCopy,
        // });
    };

    changeCategoryName = categoryName => {
        this.setState({
            categoryName,
        });
    };

    changeTagName = tagName => {
        this.setState({
            tagName,
        });
    };

    render() {
        const { classes } = this.props;
        const { tagName, categoryName, categoryNames } = this.state;

        return (
            <div className={classes.root}>
                <TextField
                    className={classes.tagTextField}
                    id="outlined-basic"
                    label="New Tag Name"
                    placeholder="New Tag Name"
                    variant="outlined"
                    value={tagName}
                    onChange={e => this.changeTagName(e.target.value)}
                    autoComplete="off"
                    InputProps={{
                        className: classes.inputBackground,
                    }}
                    InputLabelProps={{
                        className: classes.inputLabel,
                    }}
                />
                <FormControl>
                    <InputLabel id="category-select">Select</InputLabel>
                    <Select
                        labelId="category-select"
                        id="demo-simple-select-helper"
                        value={categoryName}
                        onChange={e => this.changeCategoryName(e.target.value)}
                    >
                        {categoryNames amp;amp;
                            categoryNames.map((element, index) => {
                                return (
                                    <MenuItem value={element} key={index}>
                                        {element}
                                    </MenuItem>
                                );
                            })}
                    </Select>
                </FormControl>
                <Button
                    className={classes.changeNameButton}
                    onClick={() => this.submit()}
                    variant="contained"
                    color="primary"
                    disabled={tagName.length === 0 amp;amp; categoryName.length === 0}
                >
                    Save Tag
                </Button>
            </div>
        );
    }
}
 

Как вы хотите отключить, когда ни у одного из них нет значений

 disabled={!tagName || !categoryName}
 

это все, что тебе нужно.

Если вы используете amp;amp; , ваша кнопка будет отключена только в том случае, если оба значения являются ложными.