Как динамически связать модель данных с состоянием «Реагировать»? - PullRequest
Новая
       15

Как динамически связать модель данных с состоянием «Реагировать»?

0 голосов
/ 03 июля 2019

Я начал изучать React несколько дней назад, и я мало знаком с этим, до этого я работал с Angular для клиентской стороны и .net core mvc с c # для серверной стороны.

Динамическое связывание данных сПросмотр HTML, а также проверка данных выглядят очень комфортно, когда я использую «Angular», но когда я переключаюсь на «React», я становлюсь слепым.И

Я не мог найти способ связать модель данных с представлением в Интернете

что я нашел? 

class RegisterPage extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        user: {
            firstName: '',
            lastName: ''
        }
    };

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

, где у пользователя this.state есть userкоторые имеют два свойства, и они будут связываться и проверяться с представлением в текстовом поле, например: 

render() {
    const { user } = this.state;
    return (
            <form name="form" onSubmit={this.handleSubmit}>
                    <input type="text" className="form-control" name="firstName" value={user.firstName} onChange={this.handleChange} />
                    {!user.firstName &&
                        <div className="help-block">First Name is required</div>
                    }
                    <input type="text" className="form-control" name="lastName" value={user.lastName} onChange={this.handleChange} />
                    {!user.lastName &&
                        <div className="help-block">Last Name is required</div>
                    }
            </form>
        </div>
    );
}

Что я хочу? 

public class UserModel
{
    public long Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
}

Передать эту модель данных .cs с помощью this.state и связать то же с видом.

Возможно ли с реакцией, если да, то, пожалуйста, предоставьте решение.

1 Ответ

0 голосов
/ 03 июля 2019

Надеюсь, я хорошо понял вопрос операции: 

class UserModel {
   constructor(Id, FirstName, LastName) {
    this.Id = Id;
    this.FirstName = FirstName;
    this.LastName = LastName;
  }
  
   get id() {
     return this.Id;
   };
   
   get firstName() {
     return this.FirstName;
   };
   
   get lastName() {
     return this.LastName;
   };
   
   set id(newId) {
    this.Id = newId;   // validation could be checked here such as only allowing non numerical values
   }
   
   set firstName(newName) {
    this.FirstName = newName;   // validation could be checked here such as only allowing non numerical values
   }
   
   set lastName(newSurname) {
    this.LastName = newSurname;   // validation could be checked here such as only allowing non numerical values
   }
   
   get instance() {
     return ({
        id: this.Id,
        firstName: this.FirstName,
        lastName: this.LastName,
     })
   }
}

const user = new UserModel(1, 'John', 'Doe');

console.log(user.id);
console.log(user.firstName);
console.log(user.lastName);
console.log(user.instance);
...