Question

我正在制作类似

我希望每当用户更改“标签”输入文本时，添加按钮都处于活动状态。

我正在使用material-ui，并制作了一个Input组件。

  const SingleInput = (props) => ( 
    <Fragment>
      <FormControl margin="normal" required fullWidth>
        <TextField
        id={props.id}
        type={props.type}
        name={props.name}
        label={props.label}
        value={props.content}
        variant={props.variant}
        placeholder ={props.placeholder}
        onChange={props.controlFunc}>
        </TextField>
      </FormControl>
    </Fragment>
  );
  export default SingleInput;

然后将其导入到表单中，例如：

class AddCompanyForm extends React.Component {
  constructor() {
    super();
    this.state = {
      company_name: "",
      company_description: "",
      company_tag: "",
      company_tags: "",
      company_contact: "",
      disabled: true
    };

    this.handleOnSubmit = this.handleOnSubmit.bind(this);
    this.handleOnChange = this.handleOnChange.bind(this);
    this.handleOnSelect = this.handleOnSelect.bind(this);
  }
  handleOnChange(e) {
    e.preventDefault();
    this.setState({ [e.target.name]: e.target.value });
    this.setState({ disabled: false });
    console.log("teg", this.state.company_tag.length);
    console.log("cont", this.state.company_contact.length);
    if (this.state.company_tag.length == 1) {
      this.setState({ disabled: true });
    }
  }

  handleOnSubmit(e) {
    e.preventDefault();
    this.props.createCompany(this.state);
  }

  handleOnSelect(e) {
    e.preventDefault();
    chipsValue.push(this.state.company_tag);
    this.setState({
      company_tags: chipsValue,
      company_tag: "",
      disabled: true
    });
  }

  render() {
    return (
      <Paper style={styles.paper}>
        <Avatar>
          <LockIcon />
        </Avatar>
        <Typography variant="headline">Add a New Company</Typography>
        <form onSubmit={this.handleOnSubmit}>
          <SingleInput
            id={"company_name"}
            type={"company_name"}
            name={"company_name"}
            label={"Company Name"}
            content={this.state.company_name}
            controlFunc={this.handleOnChange}
            variant={"filled"}
          />
          <SingleInput
            id={"company_description"}
            type={"company_description"}
            name={"company_description"}
            label={"Description"}
            content={this.state.company_description}
            controlFunc={this.handleOnChange}
            variant={"filled"}
          />
          <SingleInput
            id={"company_tags"}
            type={"company_tags"}
            name={"company_tag"}
            label={"Tags (to add dropdown here!)"}
            content={this.state.company_tag}
            controlFunc={this.handleOnChange}
            variant={"filled"}
          />
          <Button
            disabled={this.state.disabled}
            onClick={this.handleOnSelect}
            variant="raised"
            color="secondary"
          >
            Add
          </Button>
          <SingleInput
            id={"company_contact"}
            type={"company_contact"}
            name={"company_contact"}
            label={"Contact"}
            content={this.state.company_contact}
            controlFunc={this.handleOnChange}
            variant={"filled"}
          />
          <Button type="submit" fullWidth variant="raised" color="primary">
            Add Company
          </Button>
        </form>
      </Paper>
    );
  }
}
const mapDispatchToProps = dispatch =>
  bindActionCreators(
    {
      createCompany
    },
    dispatch
  );
export default connect(
  null,
  mapDispatchToProps
)(AddCompanyForm);

现在问题是什至当我更改“公司名称”或任何其他输入按钮时，“添加”按钮也被启用。

非常感谢您的帮助。

Answer 1

使用React Hooks检查以下示例的按钮状态，并使用TextField的onChange属性进行设置。

export default function TextFieldAndButton (props) {
  const [btnDisabled, setBtnDisabled] = useState(true)

  return (
    <>
        <TextField
          onChange={(text) => setBtnDisabled(!text.target.value)}
        />
        <Button disabled={btnDisabled}>OK</Button>
    </>
  )
}

Answer 2

这里的问题是setState是异步的，并且您在handleOnChange内部使用状态值，然后再对其进行更新。使用setState回调计算disable或更好的方法是在渲染中计算disabled。这种方法使它变得更加简单，甚至在首次渲染时也可以使用。

render() {
  const disabled = !this.state.company_tag.length;

  return (
    // ...
    <Button
      disabled={disabled}
      onClick={this.handleOnSelect}
      variant="raised"
      color="secondary"
    >
      Add
    </Button>
    // ...
  );
}

根据React.js中的TextField值启用或禁用按钮

2 个答案: