मेरे पास एक प्रतिक्रिया प्रपत्र है जिसमें गतिशील पंक्तियाँ हैं, लेकिन मैं लाइन 76 पर अटका हुआ हूँ (डेमो: https://codesandbox .io/s/pw58j0vzoq), सुनिश्चित नहीं हैं कि पंक्ति में मान को अपडेट करने के लिए मैं क्या कर सकता हूं

class App extends React.Component {
  state = {
    acceptedValues: [
      {
        id: 1,
        _arguments: ["Samsung", "xiaomi"]
      },
      {
        id: 2,
        _arguments: ["OR", "AND"]
      }
    ]
  };

  handleChange = (name, index, argumentIndex) => e => {
    const { acceptedValues } = this.state;
    if (name === "_arguments") {
      updatedState = acceptedValues.map((o, i) => {
        if (i === index) {
          return {
            ...o,
            _arguments: o._arguments.map((o2, index2) => {
              if (index2 === argumentIndex) {
                //what to do here?
              }
              return o;
            })
          };
        }
        return o;
      });
      this.setState({
        acceptedValues: updatedState
      });
    }
  };

  render() {
    const { acceptedValues } = this.state;
    return (
      <div>
        {acceptedValues.map(({ operator, _arguments }, index) => (
          <div style={{ marginBottom: 20 }}>

            <div>
              {_arguments.map((val, argumentIndex) => (
                <div>
                  <input
                    onChange={this.handleChange(
                      "_arguments",
                      index,
                      argumentIndex
                    )}
                    id="_arguments"
                    type="text"
                    value={val}
                  />
                  <button onClick={this.removeArgument(index, argumentIndex)}>
                    -
                  </button>
                </div>
              ))}
            </div>
          </div>
        ))}
      </div>
    );
  }
}

मैं सही सरणी तक नेविगेट करने में सक्षम हूं, लेकिन सरणी के भीतर मान को अपडेट करने के तरीके पर अटका हुआ हूं, मेरे handleChange फ़ंक्शन में 2 इंडेक्स हैं।

0
Melissa94 15 अक्टूबर 2018, 10:57

1 उत्तर

सबसे बढ़िया उत्तर

वहां आप एक सरणी को दूसरे में मैप कर रहे हैं, इसलिए आपको बस यह चुनना चाहिए कि किस स्ट्रिंग को वापस करना है, जैसे:

_arguments: o._arguments.map(
    (o2, index2) => {
        if (index2 === argumentIndex) return e.target.value
        return o2
    }
)

या और भी साफ-सुथरे तरीके से:

_arguments: o._arguments.map(
    (o2, index2) => index2 === argumentIndex ? e.target.value : o2
)
0
0xc14m1z 15 अक्टूबर 2018, 08:07