Как правильно изменить значение состояния массива объектов? - PullRequest
Новая
       28

Как правильно изменить значение состояния массива объектов?

1 голос
/ 07 июня 2019

Представьте себе эту переменную: 

let myArray = [
        {
            name: "animal",
            value: "",
        },
        {
            name: "fruit",
            value: "",
        },
        (...)
];

  1. myArray установлен в камне - он жестко запрограммирован и его длина не изменится, но это длинный массив из 10 элементов.Пользователь будет обновлять только объекты myArray значения через ввод html.Исходя из вышеизложенного, можно ли рассматривать myArray как состояние в Svelte?

  2. Является ли приведенный ниже пример правильным способом изменения состояния myArray в Svelte? 

(...)
myArray.forEach(element => { 
    if (element.name === name) element.value = value;
});
У меня есть состояние кнопки, что ее атрибут disabled зависит от всех элементов в myArray, имеющих какое-либо значение.Могу ли я использовать Sveltes $: btnIsDisabled реактивные заявления для достижения этого и как? 
<button type="submit" disabled={btnIsDisabled}>
    Submit me
</button>

1 Ответ

2 голосов
/ 07 июня 2019

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

Попробуйте что-то вроде этого: https://codesandbox.io/s/magical-fog-tfq3q

class App extends React.Component {
  state = {
    favorites: [
      { name: "animal", value: "" },
      { name: "city", value: "" },
      { name: "song", value: "" },
      { name: "place", value: "" },
      { name: "food", value: "" },
      { name: "sport", value: "" }
    ],
    emptyFields: null
  };

  handleOnChange = event => {
    const { favorites } = this.state;

    let updatedArr = favorites.map(favorite => {
      if (favorite.name === event.target.name) {
        return {
          ...favorite,
          value: event.target.value
        };
      } else {
        return favorite;
      }
    });

    let emptyFields = updatedArr.filter(favorite => {
      return favorite.value.length === 0;
    });

    this.setState({
      ...this.state,
      favorites: updatedArr,
      emptyFields: emptyFields
    });
  };

  createFavoriteInputs = () => {
    const { favorites } = this.state;
    return favorites.map(favorite => {
      return (
        <div key={favorite.name}>
          <label>{favorite.name} :</label>
          <input
            value={favorite.value}
            name={favorite.name}
            onChange={this.handleOnChange}
          />
        </div>
      );
    });
  };
  render() {
    const { emptyFields } = this.state;
    return (
      <div>
        {this.createFavoriteInputs()}
        <button
          disabled={!emptyFields || emptyFields.length > 0 ? true : false}
        >
          Submit
        </button>
        {!emptyFields ||
          (emptyFields.length > 0 && (
            <div>
              The following fields are required:
              <ul>
                {this.state.emptyFields.map(field => {
                  return <li key={field.name}>{field.name}</li>;
                })}
              </ul>
            </div>
          ))}
      </div>
    );
  }
}

Так что теперь с состоянием emptyFields, у нас есть кнопка, которая disabled если есть какие-либо emptyFields.

handleOnChange() помогает нам перемещаться по правильному значению состояния для обновления в нашем массиве, создавая новый массив в нашем состоянии всякий раз, когда мы производим обновление одного из входовв форме.

...