Question

我正在尝试学习React。我仍然对如何在组件和App之间传递状态感到困惑。

我要完成的工作是从另一个组件调用Onclick =“”来在主导出App函数中调用一个函数：

从本质上讲，它应该能够删除绘制到Google地图中的多边形。

表单的组成部分：

function count_longest_sequence_of_ones(array){
  return array
    .reduce( count_sequential_ones, [0])
    .sort()
    .pop();
  
  function count_sequential_ones(acc, number) {
    if( number === 1 ) acc[acc.length-1]++;
    else acc.push(0);
    return acc;
  }
}

console.log(count_longest_sequence_of_ones([0,1,0,1,1,0,0,1]));
console.log(count_longest_sequence_of_ones([1,1,1,1,0,1]));

主应用：

class SuperCoolFarm extends React.Component {
    constructor(props) {
        super(props);
        console.log(props);
        this.state = {value: ''};

        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({value: event.target.value});
    }

    handleSubmit(event) {
        alert('A name was submitted: ' + this.state.value);
        event.preventDefault();
    }

    render() {
        return (
            <Button variant="secondary" size="lg" onClick={() => {
                        //call function DeletePolygon from app
                    }}>
                        Remove Polygon
                    </Button>
        );
    }


}

我要这样做正确吗？

提琴：想法是删除多边形通过清空Paths对象将其从地图上删除。 https://codesandbox.io/s/happy-frog-d6203?file=/src/App.js

Answer 1

只需将函数作为道具传递给组件

class orderDetailSerializer(serializers.ModelSerializer):

    class Meta:
        model = orderDetail
        fields = '__all__'
        read_only_fields = ('order',)

像这样在您的组件中使用

<SuperCoolFarm thePath={path} onDeletePoligon={DeletePoligon}/>

反应绑定onclick在导出功能

1 个答案: