我是React的新手,这让我很困惑。 我有一个具有数组的根组件,并且正在将函数ADD和DELETE作为道具传递给子组件ui_forms 在子组件中,我接受输入参数,并根据按下的按钮从数组中推送或删除数组。 但是,我似乎不能多次执行推/删除操作,因为我想我在根组件中只注入了一次子组件。

是否有机会通过仅发送一次道具来执行用户想要的多次推送或删除操作?

谢谢

App.js

import FormsMap from './form_map';

class App extends Component {
  state = {
    maps : [
      {'regno' : 'Karan', 'id' : 1},
      {regno : 'Sahil', 'id' : 2},
      {'regno' : 'Rahul', id : 4},
      {regno : 'Mohit', id : 5},
      {regno : 'Kartik', id : 3}
    ]
  };

   function_as_props(list1) {
      console.log(this.state.maps);
      let ninja = [...this.state.maps];
      console.log(ninja);
      ninja.push({"regno" : list1, "id" : Math.random()*10});

      this.setState({
        maps : ninja 
      });
    console.log(ninja);


    function_as_props1(name) {
       let t = this.state.maps.indexOf(name);  
       let x = this.state.maps.splice(t,1);
       console.log(x);
       this.setState({
         maps : x
       });
       console.log(this.state.maps);
    }
  }

  render() {
      const p = this.state.maps.map(list => {
        return(
           <div key={list.id}> {list.regno} </div>
        );
       })

 return(
   <FormsMap transpose = {this.function_as_props.bind(this)}  traverse ={this.function_as_props1.bind(this)} /> <br />
 );


} 
}

export default app;

form_map.js

import React, { Component } from 'react';

class FormsMap extends Component {
    state = {
        name : null,
        age : null,
        hobby : null
    };

    changes(e) {
        this.setState({
            [e.target.id] : e.target.value
        });
    }

    handle = (e) => {
        e.preventDefault();
        console.log(this.state);
        this.props.transpose(this.state.name);
    }

    dels = (e) => {
        this.setState({
            [e.target.id] : e.target.value
        });
    }

    del_button(e) {
        e.preventDefault();
        //console.log(this.state.name);
        this.props.traverse(this.state.name);
    }
    render() {
        return(
            <React.Fragment>
            <form onSubmit={this.handle}>   {/* After entering all info, Press Enter*/}
                <label htmlFor="labels"> Name : </label>  
                <input type="text" id="name" placeholder="Your name goes here..." onChange={this.changes.bind(this)} />
                <label htmlFor="labels"> Age : </label>  
                <input type="text" id="age" placeholder="Your age goes here..." onChange={this.changes.bind(this)} />
                <label htmlFor="labels"> Hobby : </label>  
                <input type="text" id="hobby" placeholder="Your hobby goes here..." onChange={this.changes.bind(this)} /> <br /><br />
                <input type="submit" value="SUBMIT" /><br /><br />
            </form>

            <input type="text" id="name" placeholder="Enter name to delete..." onChange={this.dels} />   <button onClick={this.del_button.bind(this)}> DELETE </button>
            </React.Fragment>

        );
    }
}

export default FormsMap;

#1楼 票数:2 已采纳

尝试这个


App.js

import React, { Component } from "react";
import FormsMap from "./components/FormsMap";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      maps: [
        { regno: "Karan", id: 1 },
        { regno: "Sahil", id: 2 },
        { regno: "Rahul", id: 4 },
        { regno: "Mohit", id: 5 },
        { regno: "Kartik", id: 3 }
      ]
    };
  }
  function_as_props(list1) {
    let ninja = this.state.maps.concat({
      regno: list1,
      id: Math.random() * 10
    });
    this.setState({ maps: ninja });
  }
  function_as_props1(name) {
    let x = this.state.maps.filter(
      list => list.regno.toLocaleLowerCase() !== name.toLocaleLowerCase()
    );
    this.setState({
      maps: x
    });
  }
  render() {
    return (
      <React.Fragment>
        {this.state.maps.map(list => <div key={list.id}>{list.regno}</div>)}
        <FormsMap
          transpose={this.function_as_props.bind(this)}
          traverse={this.function_as_props1.bind(this)}
        />
      </React.Fragment>
    );
  }
}

export default App;

FormsMap.js

import React, { Component } from "react";

class FormsMap extends Component {
  state = {
    name: null,
    age: null,
    hobby: null
  };

  changes(e) {
    this.setState({
      [e.target.id]: e.target.value
    });
  }

  handle = e => {
    e.preventDefault();
    this.props.transpose(this.state.name);
  };

  dels = e => {
    this.setState({
      [e.target.id]: e.target.value
    });
  };

  del_button(e) {
    e.preventDefault();
    this.props.traverse(this.state.name);
  }
  render() {
    return (
      <React.Fragment>
        <form onSubmit={this.handle}>
          {" "}
          {/* After entering all info, Press Enter*/}
          <label htmlFor="labels"> Name : </label>
          <input
            type="text"
            id="name"
            placeholder="Your name goes here..."
            onChange={this.changes.bind(this)}
          />
          <label htmlFor="labels"> Age : </label>
          <input
            type="text"
            id="age"
            placeholder="Your age goes here..."
            onChange={this.changes.bind(this)}
          />
          <label htmlFor="labels"> Hobby : </label>
          <input
            type="text"
            id="hobby"
            placeholder="Your hobby goes here..."
            onChange={this.changes.bind(this)}
          />{" "}
          <br />
          <br />
          <input type="submit" value="SUBMIT" />
          <br />
          <br />
        </form>
        <input
          type="text"
          id="name"
          placeholder="Enter name to delete..."
          onChange={this.dels}
        />{" "}
        <button onClick={this.del_button.bind(this)}> DELETE </button>
      </React.Fragment>
    );
  }
}

export default FormsMap;

这是演示: https : //codesandbox.io/s/xl97xm6zpo

  ask by KNIGHT MAHAJAN translate from so

未解决问题?本站智能推荐:

1回复

ReactHooks:传递状态道具不是函数?

我将状态钩子作为道具传递给我的组件,我的“setCity”工作得很好,但是当我尝试实现 setFlag 时,我收到一条错误消息“Searchbar.jsx:15 Uncaught TypeError: setFlag is not a function” 那么为什么我可以设置city的值而不是fla
2回复

如何将状态数组转移到道具

所以我有2个React文件,一个App.js和一个category.js。 当我将数组传输到category.js时,它显示了大量文本,而不是将其拆分为不同的数组按钮。 我尝试搜索,但不知道该怎么做。 有人可以解释吗? 这是班级的应用程序 这是使用道具的类别
1回复

在反应中传递状态或道具以将值传递给子组件

我很新来反应。 我需要将验证是否成功传递给子反应组件。下面是我的父组件。 Login.js - 父级 Input_Box.js - 子组件 我尝试了 SO 中给出的大部分建议。 但是每次我在子组件中都undefined inputValidation时。 我在这里做错了什么?
2回复

反应状态作为道具传递给子组件未显示

我用钩子创建了一个状态。 然后,使用钩子从不同的组件修改它的值。 然后我将该状态发送到第三个组件,该组件根据 Chrome 的开发人员工具接收它,但我无法显示它! 我要疯了吗? 创建状态 我没有展示我如何修改状态,因为我知道它使用它的钩子正确完成了:我修改了 stepper.datosFormCli
3回复

如何将异步状态传递给子组件道具?

我是新手,我正在尝试从 API 获取数据并将数据传递给子组件。 我已将数据传递给父组件上的状态,但是,当我将其作为道具传递给子组件时,它会记录为一个空数组。 我确定我忽略了一些简单的东西,但我不知道是什么,我的代码在下面父组件 子组件
1回复

从状态数组渲染的组件不会更新收到的道具

我正在从父级状态渲染子级组件。 它们的呈现是由以下触发的: 子组件是由创建的 但是,我正在正确管理状态,并且能够在父组件中看到状态更改,但是在Alert组件中没有收到更新的道具。
1回复

无法访问从父级作为道具传递的数组-React

开始使用 React。 我在子组件 WeatherOptionsView 中有两个下拉列表。 我试图根据从父组件 WeatherContainerView 传递的先前选择的值的 prop 数组来设置它的默认值。 我还想将它设置为状态,因为该值将在下拉菜单的 onChange 中改变。 当我这样做时,
1回复

将道具绑定到状态ReactJS

我在互联网上读到,执行以下操作是不好的编码习惯: 但是,如果我有这种情况: 会有问题吗? 找不到网上没有说我做不到的任何地方。 我试图确保每次导航回该组件时,该组件都能从Redux Store获取数据。 我尝试使用componentWillReceiveProps(),但到目前为