My input only accepts one character at a time. And it is repeating the same text to other Input



  • I can only enter the input by placing one character at a time. and the same value that I put in one, is repeated for the other inputs.

    I've tried several alternatives to handleChange and so on, but nothing's good.

    I need a light, please!

    class Move2 extends Component {
      constructor(props) {
        super(props);
        this.state = {
          amount: "",
          code: "",
          option: "Entrada"
        };
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
      }
    

    handleSubmit = e => {
    e.preventDefault();
    this.props.updateProduct(this.state);
    };
    handleChange = e => {
    this.setState({
    [e.target.name]:
    e.target.name === "amount" ? parseInt(e.target.value) : e.target.value
    });
    };

    render() {
    const { products, auth } = this.props;
    const columns = [

      {apenas headers normais aqui}...
    
      {
        Header: "Código",
        accessor: "code",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <input
              name="code"
              type="text"
              value={this.state.code}
              onChange={this.handleChange.bind(this)}
              style={{
                width: "100px",
                height: "20px",
                border: "none"
              }}
            ></input>
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 150
      },
      {
        Header: "Movimentação",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <input
              name="amount"
              type="text"
              defaultValue={this.state.amount}
              onChange={this.handleChange}
              style={{
                width: "100px",
                height: "20px",
                border: "none"
              }}
            ></input>
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 150
      },
      {
        Header: "Movimentação",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <input
              name="date"
              type="date"
              defaultValue={this.state.date}
              onChange={this.handleChange}
              style={{
                width: "130px",
                height: "20px",
                border: "none"
              }}
            ></input>
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 150
      },
      {
        Header: "Opção",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <select
              name="option"
              value={this.state.option}
              onChange={this.handleChange}
            >
              <option value="Entrada">Entrada</option>
              <option value="Saída">Saída</option>
            </select>
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 100,
        maxWidth: 100,
        minWidth: 100
      },
      {
        Header: "Confirmar",
        style: {
          textAlign: "center"
        },
        Cell: props => {
          return (
            <input
              onClick={e => {
                this.handleSubmit(e);
                this.handleSubmitMovimentacao(e);
              }}
              value="Confirmar"
              type="submit"
            />
          );
        },
        sortable: false,
        filterable: false,
        responsive: true,
        width: 80,
        maxWidth: 80,
        minWidth: 80
      }
    ];
    return (
      <div className="s-container">
        <ReactTable
          columns={columns}
          data={products}
        />
      </div>
    );
    

    }
    }
    const mapStateToProps = state => {
    return {
    products: state.firestore.ordered.products,
    auth: state.firebase.auth
    };
    };

    const mapDispatchToProps = dispatch => {
    return {
    updateProduct: product => dispatch(updateProduct(product)),
    };
    };
    export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    firestoreConnect([{ collection: "products" }])
    )(Move2);
    ``

    segue print: https://i.stack.imgur.com/ZkOdL.png



  • Instead of using prop defaultValue, uses prop value in input.

    Cell: props => {
          return (
            <input
              name="date"
              type="date"
              value={this.state.date}
              onChange={this.handleChange}
              style={{
                width: "130px",
                height: "20px",
                border: "none"
              }}
            ></input>
          );
        }
    



Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2