仅当 TextField 和 Select 都有值时如何启用按钮

Question

我有这个组件

我希望只有 TextField 和 Select 都有值时才启用“保存标签”按钮。

我想不通。我尝试了各种方法，例如：

disabled={!(ZtagName.length === 0 && categoryName.length === 0}

一真一假则return假,

我搜索 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',
        '&:hover': {
            cursor: 'pointer',
            backgroundColor: theme.palette.primary.dark,
        },
        '&:active': {
            cursor: 'pointer',
            backgroundColor: theme.palette.primary.dark,
        },
        '&: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 &&
                            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 && categoryName.length === 0}
                >
                    Save Tag
                </Button>
            </div>
        );
    }
}

Answer 1

因为你想在其中一个没有值时禁用

disabled={!tagName || !categoryName}

就是你所需要的。

如果您使用 &&，只有当两个值都为假时，您的按钮才会被禁用。

仅当 TextField 和 Select 都有值时如何启用按钮

How to enable button only if both TextField and Select has values

javascript

reactjs

conditional-statements

disable