每当在 reactjs 中选中复选框时清除文本输入

Question

我有多个文本输入字段和一个复选框。每当我选中复选框时，我都想清除其中一个文本输入字段。我为此查看了各种答案，但是没有一个有效。

这是我的代码：

import React, { Component } from 'react';

class Form extends Component {
    state = {}

    constructor(props) {
        super(props);
        this.state = {
            text1: "",
            text2: ""
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleClear = this.handleClear.bind(this);
      }

      handleChange(event) {
        let name = event.target.name;
        let value = event.target.value;
        this.setState({[name]: value});
      }

      handleClear(event){
        let checked = event.target.checked;
        if(checked){
            this.setState({"text2": ''}); // did not work
            // how to do it???
            console.log(this.state)
        }
      }

    render() { 
        return (
            <form>
                <input type="text" name="text1" onChange={this.handleChange}/>
                <input type="text" name="text2" onChange={this.handleChange}/>
                <input type="checkbox" name="clear-text2" onChange={this.handleClear}/>
            </form>
        );
    }
}
 
export default Form;

在此代码中，我希望在选中复选框时清除字段 text2。

Answer 1

试试这样的东西，

<input type="text" name="text1" onChange={this.handleChange} value={this.state.text1} />
<input type="text" name="text2" onChange={this.handleChange} value={this.state.text2} />

您没有将state 值传递给输入元素。所以，value 默认为 null 所以 React 允许你修改那个输入。并且您错误地认为您的状态可以控制输入值。

Answer 2

您的文本输入不是受控组件，它们具有 onChange 但您没有设置 value 属性：

class Form extends React.Component {
  state = {};

  constructor(props) {
    super(props);
    this.state = {
      text1: '',
      text2: '',
    };
    //remove bind, using arrow functions will bind
  }

  handleChange = (event) => {//arrow function
    let name = event.target.name;
    let value = event.target.value;
    this.setState({ [name]: value });
  };

  handleClear = (event) => {//arrow function
    let checked = event.target.checked;
    if (checked) {
      this.setState({ text2: '' }, () =>
        //log in the setState callback gets the current state
        //  you do not want to nest this too much, you already
        //  know the state because you just set it so there is
        //  usually no need for this
        console.log('works:', this.state)
      );

      console.log('does not work', this.state);
    }
  };

  render() {
    return (
      <form>
        <input
          type="text"
          name="text1"
          value={this.state.text1}
          onChange={this.handleChange}
        />
        <input
          type="text"
          name="text2"
          // added value property to text2
          value={this.state.text2}
          onChange={this.handleChange}
        />
        <input
          type="checkbox"
          name="clear-text2"
          onChange={this.handleClear}
        />
      </form>
    );
  }
}

ReactDOM.render(<Form />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>

这是一个功能组件示例：

const Form = () => {
  //using useState to set state
  const [state, setState] = React.useState({
    text1: '',
    text2: '',
  });
  //using useCallback for event handlers
  const handleChange = React.useCallback((event) => {
    let name = event.target.name;
    let value = event.target.value;
    //pass callback to setState to get current state
    //  and copying state to new state
    setState((state) => ({ ...state, [name]: value }));
  }, []);

  const handleClear = React.useCallback((event) => {
    let checked = event.target.checked;
    if (checked) {
      setState((state) => {
        const newState = { ...state, text2: '' };
        console.log('works', newState);
        return newState;
      });
      //logging a stale closure will not work
      //  and only creates needless dependency
      // console.log('does not work', state);
    }
  }, []);
  //no this in jsx
  return (
    <form>
      <input
        type="text"
        name="text1"
        onChange={handleChange}
      />
      <input
        type="text"
        name="text2"
        // added value property to text2
        value={state.text2}
        onChange={handleChange}
      />
      <input
        type="checkbox"
        name="clear-text2"
        onChange={handleClear}
      />
    </form>
  );
};

ReactDOM.render(<Form />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="root"></div>