基于 React.js 中的 TextField 值启用或禁用按钮

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>
    // ...
  );
}