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

【问题标题】：Enable or disable a button based on a TextField value in React.js基于 React.js 中的 TextField 值启用或禁用按钮
【发布时间】：2018-10-18 06:44:52
【问题描述】：

我正在制作一个类似的表格

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

我正在使用 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);

现在的问题是，即使我更改“公司名称”或任何其他输入按钮，“添加”按钮也会启用。

非常感谢任何帮助。

【问题讨论】：

一种蛮力方法是在controlFunc 属性中添加函数绑定并传递一个参数：controlFunc={this.handleOnChange.bind(this, {enableAdd: true})}，然后相应地检查该参数：handleOnChange(options, e){...}。可能有一种更优雅的方式，所以我并不是说这就是答案，但这会让你继续前进。你也可以探索onFocusonBlur。或者您只需为具有您想要的特殊行为的输入创建一个onChange。

标签： javascript reactjs material-ui

【解决方案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>
    </>
  )
}

【讨论】：

只是补充一下，如果只输入空格，我们可以写 setBtnDisabled(!text.target.value.trim()) 来避免按钮启用。

【解决方案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>
    // ...
  );
}

【讨论】：