删除按钮上的文本字段单击不起作用reactjs

Question

我有多个带有关闭按钮的日期文本字段，点击关闭（x）应该删除文本字段，但不工作，（删除点击关闭按钮的文本字段）这是我的代码链接 https://codesandbox.io/s/strange-http-zhj4f

Answer 1

尝试这样的事情。确保将日期传递给 X 按钮中的方法。像这样

onClick={() => this.textareaHandler(datevalue)}

这是一个工作代码

import React from "react";
import DatePicker from "react-date-picker";

class AddDate extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      closedatearr: ["12-02-2020", "19-02-2020"]
    };
  }

  buttonHanlder = value => {
    var dateformat = [
      ("0" + value.getDate()).slice(-2) +
        "-" +
        ("0" + (value.getMonth() + 1)).slice(-2) +
        "-" +
        value.getFullYear()
    ];
    this.setState(prevState => ({
      closedatearr: [...prevState.closedatearr, ...dateformat]
    }));
  };

  textareaHandler = val => {
    const { closedatearr } = this.state;
    let removeval = closedatearr.filter(item => item !== val);
    this.setState({
      closedatearr: removeval
    });
  };

  render() {
    const { closedatearr } = this.state;
    return (
      <React.Fragment>
        <div className="row">
          <div className="form-group col-lg-12 col-sm-12">
            <label htmlFor="sortorder" className="floatLeft label2">
              Select Date
            </label>
          </div>
        </div>
        <div className="row">
          <div className="form-group col-lg-12 col-sm-12">
            <DatePicker
              locale="en-GB"
              onChange={value => {
                this.setState({ closedate: value }, () => {
                  this.buttonHanlder(value);
                });
              }}
              value={new Date()}
            />
          </div>
        </div>
        <div className="row">
          <div className="form-group col-lg-12 col-sm-12">
            {closedatearr.map((datevalue, i) => {
              return (
                <div className="text-content" key={i}>
                  <input type="text" value={datevalue} className="inputfield" />
                  <button
                    type="button"
                    onClick={() => this.textareaHandler(datevalue)}
                  >
                    X
                  </button>
                </div>
              );
            })}
          </div>
        </div>
        <div style={{ height: "30px" }} />
      </React.Fragment>
    );
  }
}

export default AddDate;

Answer 2

最好用这种方式 map() 编码

{closedatearr.map(datevalue => {
          return (
            <div className="text-content" key={datevalue.toString()}>
              <input type="text" value={datevalue} className="inputfield" readOnly />
              <button
                type="button"
                onClick={() => this.textareaHandler(datevalue)}
              >
                X
              </button>
            </div>
          );
        })}

删除按钮上的文本字段单击不起作用reactjs

remove the textfield on button click not working reactjs

javascript

arrayobject

reactjs

redux

react-redux