Как изменить значение реквизита в React Js? - PullRequest
Новая
       48

Как изменить значение реквизита в React Js?

0 голосов
/ 21 октября 2019

Ниже приведен код ниже, и теперь я хотел изменить значение имени в том же компоненте? Как мне этого добиться ?? 

render(){
return(
<div>
<p>{this.props.name}</p>
</div>
)
}

Ответы [ 4 ]

1 голос
/ 21 октября 2019

реквизиты не должны быть изменены в реакции, они readonly. обновите их в родительском компоненте, а затем передайте их как новое значение. компонент, получающий их, должен просто отображать их, а логическая обработка должна происходить на более высоком уровне

0 голосов
/ 21 октября 2019

Вы не должны пытаться обновить реквизиты непосредственно внутри вашего компонента, но вы можете вызвать событие в этом компоненте, которое будет перехвачено родителем, который передает это значение в качестве реквизита вашему компоненту, и тогда родительский компонент обновит это значение. который будет передаваться всем детям, которые получают эти данные в качестве реквизита. 

import { Component } from 'react';

class Child extends Component {
    render(){
        return(
            <div>
                <h2>{this.props.name}</h2>
                <button onClick={() => this.props.changeName("New name"); }>
                    Change Name
                </button>
            </div>
        )
    }
}

class Parent extends Component {
    constructor() {
        this.state = {
            name: "Name"
        }
    }
    handleChande (name) {
        this.setState({name: name});
    }

    render() {
        <div>
            <Child changeName={this.handleChange} />
        </div>
    }
}
0 голосов
/ 21 октября 2019

Вы можете добиться этого с помощью другого компонента, подобного этому.

App.js 

import React from "react";
import ChildComponent from "./ChildComponent";

class App extends React.Component {
  state = {
    name: ""
  };
  handleChane = e => {
    this.setState({ name: e.target.value });
  };
  render() {
    const { name } = this.state;
    return (
      <div>
        <ChildComponent name={name} handleChane={this.handleChane} />
      </div>
    );
  }
}

ChildComponent.js 

import React from "react";

function ChildComponent(props) {
  return (
    <div>
      <input
        type="text"
        onChange={props.handleChane}
        placeholder="enter your name"
      />
      {props.name}
    </div>
  );
}
export default ChildComponent;
0 голосов
/ 21 октября 2019

Вы не можете изменить значение реквизита, но у вас все еще есть варианты для изменения значений, которые вы можете использовать. У вас есть два варианта: либо вы изменяете его из родительского компонента, либо используете состояние вместо реквизита.

Опция 1 / изменение родителя: 

const ParentComponent = props => {
  const [name, setName] = useState('')
  return (
    <div>
      <button onClick={() => setName('test')}>Test</button>
      <ChildComponent name={name} />
    </div>
  )
}

Где ChildComponentесть ваш код для использования this.props.name.

Вариант 2 / Состояние использования: 

const MyComponent = props => {
  const [name, setName] = useState(props.name || '')
  return (
    {name}
  )
}

Примечание. Это непроверенный код для отображения идей, которые нельзя копировать. вставили.

...